feat: initial mono-repo with 30 vanity domain sites
Scaffold complete repo structure: - 28 static sites extracted from running containers on mlake - 2 dynamic sites (dasbes.de, dumusst.com) marked for separate handling - Template system with 6 templates (person-dark/light, product-dark, editorial, fun, minimal) - Shared CSS (variables, responsive, animations, noise overlay) - nginx config generator with multi-domain alias support - Build script with Docker-based nginx validation - add-site.sh helper for scaffolding new domains - Dockerfile for single nginx:alpine container Sites: clemensplassmann.de, danosi.de, deinesei.de, derkaiseristnackt.de, elefantenhor.de, fragina.de, frenchkis.de, ichbinaufbali.de, ichbinaufbarley.de, insain.de, julietensity.de, kainco.de (+keinco.de), kainstress.de, keinefreun.de, knzlmgmt.de, kopffrai.de, legalais.de, machesdocheinfach.de, mai-otto.de (+otto.flexsiebels.de, ottomatisch.de, ichbinotto.de), martinsiebels.de, matthiasbreier.de, osterai.de, paragraphenraiter.de, schulfrai.de, smartin3.de, sorgenfrai.de, vonschraitter.de, wartebitte.de Refs: otto#341
This commit is contained in:
mAi
131
sites/clemensplassmann.de/index.html
Normal file
131
sites/clemensplassmann.de/index.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Clemens Plassmann</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚖️</text></svg>">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
background: #0a0a0a;
|
||||
color: #e8e6e3;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, #c9a96e 0%, #f0d89d 50%, #c9a96e 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: #c9a96e;
|
||||
margin: 1.5rem auto;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
color: #8a8580;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.firm {
|
||||
font-size: 1rem;
|
||||
color: #6a6560;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 3rem;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: #c9a96e;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.6rem 1.5rem;
|
||||
border: 1px solid rgba(201, 169, 110, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
border-color: #c9a96e;
|
||||
background: rgba(201, 169, 110, 0.08);
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 4rem;
|
||||
font-size: 0.75rem;
|
||||
color: #3a3530;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #3a3530;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #6a6560;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.container > * {
|
||||
animation: fadeIn 0.8s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.container > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.container > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.container > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.container > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.container > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
.container > *:nth-child(6) { animation-delay: 1.1s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="name">Clemens Plassmann</h1>
|
||||
<div class="divider"></div>
|
||||
<p class="title">Patent Litigation</p>
|
||||
<p class="firm">Hogan Lovells</p>
|
||||
<div class="links">
|
||||
<a href="https://www.hoganlovells.com/en/clemens-plassmann" target="_blank">Profile</a>
|
||||
<a href="https://www.linkedin.com/in/clemens-plassmann/" target="_blank">LinkedIn</a>
|
||||
</div>
|
||||
<p class="footer">Built by <a href="https://flexsiebels.de">Otto</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/clemensplassmann.de/site.yaml
Normal file
4
sites/clemensplassmann.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: clemensplassmann.de
|
||||
template: custom
|
||||
title: "Clemens Plassmann"
|
||||
description: ""
|
||||
871
sites/danosi.de/index.html
Normal file
871
sites/danosi.de/index.html
Normal file
@@ -0,0 +1,871 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DaNoSi — Hausgemachte Feinkost</title>
|
||||
<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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--olive: #5C6B3C;
|
||||
--olive-dark: #3D4A28;
|
||||
--olive-light: #8A9A5B;
|
||||
--gold: #C5A55A;
|
||||
--gold-light: #D4BE82;
|
||||
--gold-warm: #B8923A;
|
||||
--cream: #FAF6EE;
|
||||
--ivory: #F5F0E3;
|
||||
--terracotta: #C67B5C;
|
||||
--terracotta-light: #D4977E;
|
||||
--dark: #2C2418;
|
||||
--dark-warm: #3E3425;
|
||||
--text: #4A4035;
|
||||
--text-light: #7A7068;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
color: var(--text);
|
||||
background-color: var(--cream);
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ── Navigation ── */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(44, 36, 24, 0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
padding: 0 2rem;
|
||||
border-bottom: 1px solid rgba(197, 165, 90, 0.15);
|
||||
}
|
||||
|
||||
nav .nav-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
nav .nav-brand {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.15em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .nav-links {
|
||||
display: flex;
|
||||
gap: 2.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav .nav-links a {
|
||||
color: rgba(250, 246, 238, 0.7);
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
nav .nav-links a:hover {
|
||||
color: var(--gold-light);
|
||||
}
|
||||
|
||||
/* ── Hero ── */
|
||||
.hero {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
min-height: 700px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url('https://images.unsplash.com/photo-1606787366850-de6330128bfc?w=1600&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: brightness(0.35);
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(44, 36, 24, 0.3) 0%,
|
||||
rgba(44, 36, 24, 0.1) 40%,
|
||||
rgba(44, 36, 24, 0.5) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hero-ornament {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: var(--gold);
|
||||
margin: 0 auto 2rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.hero-brand {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: clamp(4rem, 10vw, 8rem);
|
||||
font-weight: 300;
|
||||
color: var(--cream);
|
||||
letter-spacing: 0.2em;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.3em;
|
||||
text-shadow: 0 2px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
||||
color: var(--gold-light);
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
letter-spacing: 0.15em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(250, 246, 238, 0.55);
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.hero-scroll {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-scroll span {
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to bottom, var(--gold), transparent);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ── Section base ── */
|
||||
section {
|
||||
padding: 7rem 2rem;
|
||||
}
|
||||
|
||||
.section-inner {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--olive-light);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-weight: 400;
|
||||
color: var(--dark);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title em {
|
||||
font-style: italic;
|
||||
color: var(--olive);
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background: var(--gold);
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-light);
|
||||
max-width: 640px;
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
/* ── La Filosofia ── */
|
||||
.filosofia {
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
.filosofia-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filosofia-image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filosofia-image img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filosofia-image::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
left: 1.5rem;
|
||||
right: -1.5rem;
|
||||
bottom: -1.5rem;
|
||||
border: 1px solid var(--gold);
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.filosofia-quote {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 1.4rem;
|
||||
font-style: italic;
|
||||
color: var(--olive);
|
||||
line-height: 1.6;
|
||||
margin-top: 2rem;
|
||||
padding-left: 1.5rem;
|
||||
border-left: 2px solid var(--gold);
|
||||
}
|
||||
|
||||
/* ── I Prodotti ── */
|
||||
.prodotti {
|
||||
background: var(--dark);
|
||||
color: var(--cream);
|
||||
}
|
||||
|
||||
.prodotti .section-label {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.prodotti .section-title {
|
||||
color: var(--cream);
|
||||
}
|
||||
|
||||
.prodotti .section-title em {
|
||||
color: var(--gold-light);
|
||||
}
|
||||
|
||||
.prodotti .section-text {
|
||||
color: rgba(250, 246, 238, 0.6);
|
||||
}
|
||||
|
||||
.prodotti-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.prodotti-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 3/4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.prodotti-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.6s ease, filter 0.6s ease;
|
||||
filter: brightness(0.6) saturate(0.9);
|
||||
}
|
||||
|
||||
.prodotti-card:hover img {
|
||||
transform: scale(1.05);
|
||||
filter: brightness(0.45) saturate(1);
|
||||
}
|
||||
|
||||
.prodotti-card-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 2rem 1.5rem;
|
||||
background: linear-gradient(to top, rgba(44, 36, 24, 0.9) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.prodotti-card-cat {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.prodotti-card-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.2rem;
|
||||
color: var(--cream);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.prodotti-card-desc {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(250, 246, 238, 0.5);
|
||||
margin-top: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Il Giardino ── */
|
||||
.giardino {
|
||||
background: var(--ivory);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.giardino-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.giardino-image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.giardino-image img {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.giardino-image::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1.5rem;
|
||||
right: 1.5rem;
|
||||
left: -1.5rem;
|
||||
bottom: 1.5rem;
|
||||
border: 1px solid var(--olive-light);
|
||||
opacity: 0.25;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.giardino-values {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.giardino-value h4 {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: var(--dark);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.giardino-value p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ── Process ribbon ── */
|
||||
.process {
|
||||
background: var(--olive-dark);
|
||||
padding: 5rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.process .section-title {
|
||||
color: var(--cream);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.process .section-title em {
|
||||
color: var(--gold-light);
|
||||
}
|
||||
|
||||
.process-steps {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.process-step-num {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
color: var(--gold);
|
||||
line-height: 1;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.process-step-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1rem;
|
||||
color: var(--cream);
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.process-step-desc {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(250, 246, 238, 0.5);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.process-connector {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: var(--gold);
|
||||
opacity: 0.3;
|
||||
margin-top: 2.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Contact / Footer ── */
|
||||
.contact {
|
||||
background: var(--cream);
|
||||
text-align: center;
|
||||
padding: 6rem 2rem;
|
||||
}
|
||||
|
||||
.contact-brand {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
color: var(--dark);
|
||||
letter-spacing: 0.15em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-sub {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
color: var(--olive);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-light);
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.contact-divider {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: var(--gold);
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.contact-tagline {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-light);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: var(--dark);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid rgba(197, 165, 90, 0.1);
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-size: 0.7rem;
|
||||
color: rgba(250, 246, 238, 0.3);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 1024px) {
|
||||
.prodotti-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
nav .nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 5rem 1.5rem;
|
||||
}
|
||||
|
||||
.filosofia-grid,
|
||||
.giardino-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.filosofia-image img,
|
||||
.giardino-image img {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.filosofia-image::after,
|
||||
.giardino-image::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prodotti-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.prodotti-card {
|
||||
aspect-ratio: 2/3;
|
||||
}
|
||||
|
||||
.prodotti-card-content {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.prodotti-card-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.prodotti-card-desc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.process-steps {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.process-connector {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.giardino-values {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.giardino .section-text-col {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.giardino .giardino-image {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.prodotti-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.prodotti-card {
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
|
||||
.hero-brand {
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="#" class="nav-brand">DaNoSi</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#filosofia">La Filosofia</a></li>
|
||||
<li><a href="#prodotti">I Prodotti</a></li>
|
||||
<li><a href="#giardino">Il Giardino</a></li>
|
||||
<li><a href="#kontakt">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content">
|
||||
<span class="hero-ornament"></span>
|
||||
<p class="hero-sub">Hausgemachte Feinkost</p>
|
||||
<h1 class="hero-brand">DaNoSi</h1>
|
||||
<p class="hero-tagline">Dal Giardino alla Tavola</p>
|
||||
</div>
|
||||
<div class="hero-scroll"><span></span></div>
|
||||
</section>
|
||||
|
||||
<!-- La Filosofia -->
|
||||
<section class="filosofia" id="filosofia">
|
||||
<div class="section-inner">
|
||||
<div class="filosofia-grid">
|
||||
<div>
|
||||
<p class="section-label">La Filosofia</p>
|
||||
<h2 class="section-title">Mit Geduld und <em>Leidenschaft</em></h2>
|
||||
<div class="section-divider"></div>
|
||||
<p class="section-text">
|
||||
Was im eigenen Garten wächst, verdient besondere Sorgfalt. Bei DaNoSi
|
||||
wird jede Frucht von Hand geerntet, jedes Rezept mit Bedacht verfeinert.
|
||||
Keine Massenproduktion, keine Abkürzungen — nur ehrliche Handarbeit,
|
||||
die man schmeckt.
|
||||
</p>
|
||||
<p class="section-text" style="margin-top: 1.2rem;">
|
||||
Die Verbindung von deutscher Präzision und mediterraner Lebensfreude
|
||||
ist das Herz unserer kleinen Manufaktur. Jedes Glas erzählt eine
|
||||
Geschichte — von der Erde, von der Sonne, von der Hand, die es
|
||||
gemacht hat.
|
||||
</p>
|
||||
<p class="filosofia-quote">
|
||||
"Buon cibo nasce dalla terra e dal cuore."<br>
|
||||
<span style="font-size: 0.9rem; font-style: normal; color: var(--text-light);">
|
||||
— Gutes Essen entsteht aus Erde und Herz.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="filosofia-image">
|
||||
<img src="https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=800&q=80"
|
||||
alt="Gartenlandschaft im Sonnenlicht" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- I Prodotti -->
|
||||
<section class="prodotti" id="prodotti">
|
||||
<div class="section-inner">
|
||||
<p class="section-label">I Prodotti</p>
|
||||
<h2 class="section-title">Unsere <em>Spezialitäten</em></h2>
|
||||
<div class="section-divider"></div>
|
||||
<p class="section-text">
|
||||
Kleine Chargen, große Sorgfalt. Jedes Produkt entsteht in limitierter Auflage
|
||||
aus dem, was Garten und Saison hergeben.
|
||||
</p>
|
||||
|
||||
<div class="prodotti-grid">
|
||||
<div class="prodotti-card">
|
||||
<img src="https://images.unsplash.com/photo-1464965911861-746a04b4bca6?w=600&q=80"
|
||||
alt="Frische Erdbeeren für Konfitüren" loading="lazy">
|
||||
<div class="prodotti-card-content">
|
||||
<p class="prodotti-card-cat">Confetture</p>
|
||||
<h3 class="prodotti-card-title">Konfitüren & Marmeladen</h3>
|
||||
<p class="prodotti-card-desc">Aus sonnengereiften Früchten, schonend eingekocht</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prodotti-card">
|
||||
<img src="https://images.unsplash.com/photo-1592178036182-5400889dfc74?w=600&q=80"
|
||||
alt="Eingelegtes und Chutneys" loading="lazy">
|
||||
<div class="prodotti-card-content">
|
||||
<p class="prodotti-card-cat">Conserve</p>
|
||||
<h3 class="prodotti-card-title">Eingelegtes & Chutneys</h3>
|
||||
<p class="prodotti-card-desc">Würzig, süß-sauer, nach alter Tradition</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prodotti-card">
|
||||
<img src="https://images.pexels.com/photos/2802527/pexels-photo-2802527.jpeg?auto=compress&cs=tinysrgb&w=600"
|
||||
alt="Kräuter und Gewürze" loading="lazy">
|
||||
<div class="prodotti-card-content">
|
||||
<p class="prodotti-card-cat">Erbe & Spezie</p>
|
||||
<h3 class="prodotti-card-title">Kräuter & Gewürze</h3>
|
||||
<p class="prodotti-card-desc">Frisch aus dem Garten, schonend getrocknet</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prodotti-card">
|
||||
<img src="https://images.pexels.com/photos/1407846/pexels-photo-1407846.jpeg?auto=compress&cs=tinysrgb&w=600"
|
||||
alt="Liköre und Essige" loading="lazy">
|
||||
<div class="prodotti-card-content">
|
||||
<p class="prodotti-card-cat">Liquori & Aceti</p>
|
||||
<h3 class="prodotti-card-title">Liköre & Essige</h3>
|
||||
<p class="prodotti-card-desc">Hauseigene Ansätze, lange gereift</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prodotti-card">
|
||||
<img src="https://images.unsplash.com/photo-1764953835257-011f19054439?w=600&q=80"
|
||||
alt="Chili-Spezialitäten" loading="lazy">
|
||||
<div class="prodotti-card-content">
|
||||
<p class="prodotti-card-cat">Peperoncini</p>
|
||||
<h3 class="prodotti-card-title">Chili-Spezialitäten</h3>
|
||||
<p class="prodotti-card-desc">Eigene Zucht, von mild bis feurig — unsere besondere Leidenschaft</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prodotti-card">
|
||||
<img src="https://images.unsplash.com/photo-1754294437651-2a79a3f1888b?w=600&q=80"
|
||||
alt="Feine Backwaren" loading="lazy">
|
||||
<div class="prodotti-card-content">
|
||||
<p class="prodotti-card-cat">Dolci & Pane</p>
|
||||
<h3 class="prodotti-card-title">Feine Backwaren</h3>
|
||||
<p class="prodotti-card-desc">Innovative Kompositionen — handgebacken, kreativ, überraschend</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process ribbon -->
|
||||
<section class="process">
|
||||
<div class="section-inner">
|
||||
<h2 class="section-title">Dal Giardino <em>alla Tavola</em></h2>
|
||||
<div class="process-steps">
|
||||
<div class="process-step">
|
||||
<div class="process-step-num">I</div>
|
||||
<h3 class="process-step-title">Il Seme</h3>
|
||||
<p class="process-step-desc">Säen und pflegen — mit Geduld beginnt alles</p>
|
||||
</div>
|
||||
<div class="process-connector"></div>
|
||||
<div class="process-step">
|
||||
<div class="process-step-num">II</div>
|
||||
<h3 class="process-step-title">Il Raccolto</h3>
|
||||
<p class="process-step-desc">Ernte zum perfekten Zeitpunkt, von Hand</p>
|
||||
</div>
|
||||
<div class="process-connector"></div>
|
||||
<div class="process-step">
|
||||
<div class="process-step-num">III</div>
|
||||
<h3 class="process-step-title">L'Arte</h3>
|
||||
<p class="process-step-desc">Verarbeitung nach eigenen Rezepturen</p>
|
||||
</div>
|
||||
<div class="process-connector"></div>
|
||||
<div class="process-step">
|
||||
<div class="process-step-num">IV</div>
|
||||
<h3 class="process-step-title">La Tavola</h3>
|
||||
<p class="process-step-desc">Auf den Tisch — frisch und mit Liebe gemacht</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Il Giardino -->
|
||||
<section class="giardino" id="giardino">
|
||||
<div class="section-inner">
|
||||
<div class="giardino-grid">
|
||||
<div class="giardino-image">
|
||||
<img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=800&q=80"
|
||||
alt="Der Garten" loading="lazy">
|
||||
</div>
|
||||
<div class="section-text-col">
|
||||
<p class="section-label">Il Giardino</p>
|
||||
<h2 class="section-title">Wo alles <em>beginnt</em></h2>
|
||||
<div class="section-divider"></div>
|
||||
<p class="section-text">
|
||||
Der Garten ist das Herzstück von DaNoSi. Hier wachsen Beeren, Kräuter,
|
||||
Gemüse und Obst — ohne Eile, im Rhythmus der Jahreszeiten. Was die Natur
|
||||
vorgibt, bestimmt unser Sortiment. Jede Saison bringt neue Überraschungen
|
||||
auf den Tisch.
|
||||
</p>
|
||||
|
||||
<div class="giardino-values">
|
||||
<div class="giardino-value">
|
||||
<h4>Naturale</h4>
|
||||
<p>Ohne künstliche Zusätze, ohne Konservierungsstoffe</p>
|
||||
</div>
|
||||
<div class="giardino-value">
|
||||
<h4>Stagionale</h4>
|
||||
<p>Nur das, was die Saison hergibt — ehrlich und frisch</p>
|
||||
</div>
|
||||
<div class="giardino-value">
|
||||
<h4>Artigianale</h4>
|
||||
<p>Jedes Stück in Handarbeit, keine Massenproduktion</p>
|
||||
</div>
|
||||
<div class="giardino-value">
|
||||
<h4>Locale</h4>
|
||||
<p>Vom eigenen Garten direkt in die Manufaktur</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact -->
|
||||
<section class="contact" id="kontakt">
|
||||
<p class="section-label" style="color: var(--olive-light);">Kontakt</p>
|
||||
<div class="contact-brand">DaNoSi</div>
|
||||
<p class="contact-sub">Hausgemachte Feinkost</p>
|
||||
<div class="contact-divider"></div>
|
||||
<p class="contact-name">Norbert Siebels</p>
|
||||
<p class="contact-name" style="color: var(--text-light); margin-top: 0.2rem;">DaNoSi Feinkost</p>
|
||||
<div class="contact-divider"></div>
|
||||
<p class="contact-tagline">Piccole quantità, grande qualità</p>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<p>© 2026 DaNoSi Feinkost — Norbert Siebels. Alle Rechte vorbehalten.</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/danosi.de/site.yaml
Normal file
4
sites/danosi.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: danosi.de
|
||||
template: custom
|
||||
title: "DaNoSi — Hausgemachte Feinkost"
|
||||
description: ""
|
||||
8
sites/dasbes.de/site.yaml
Normal file
8
sites/dasbes.de/site.yaml
Normal file
@@ -0,0 +1,8 @@
|
||||
domain: dasbes.de
|
||||
template: custom
|
||||
title: "dasBes.de"
|
||||
description: "Das Beste ist das, was du daraus machst."
|
||||
# NOTE: This is a dynamic Bun app (server.ts), not a static site.
|
||||
# It cannot be served from the consolidated nginx container.
|
||||
# Keep running as a separate container until a static fallback is built.
|
||||
dynamic: true
|
||||
357
sites/deinesei.de/index.html
Normal file
357
sites/deinesei.de/index.html
Normal file
@@ -0,0 +1,357 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>deineSei.de — Wir bauen dir deine Seite</title>
|
||||
<meta name="description" content="deineSei.de — Deine Webseite, gebaut in Minuten. Domain, Design, Hosting — alles aus einer Hand.">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--bg-card: #16161b;
|
||||
--border: #1e1e26;
|
||||
--text: #e8e8ed;
|
||||
--text-dim: #6e6e7a;
|
||||
--text-muted: #44444f;
|
||||
--accent: #6366f1;
|
||||
--accent-glow: rgba(99, 102, 241, 0.2);
|
||||
--accent-subtle: rgba(99, 102, 241, 0.08);
|
||||
--green: #22c55e;
|
||||
--green-glow: rgba(34, 197, 94, 0.12);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed; inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none; z-index: 9999;
|
||||
}
|
||||
|
||||
.container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 20px 0;
|
||||
background: rgba(10, 10, 12, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 1.1rem; font-weight: 600; }
|
||||
.logo .deine { color: var(--text-dim); font-weight: 300; }
|
||||
.logo .sei { color: var(--accent); font-weight: 700; }
|
||||
.logo .de { color: var(--text-muted); }
|
||||
nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
|
||||
nav a:hover { color: var(--text); }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 180px 0 120px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute; top: 60px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 700px; height: 500px;
|
||||
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem; font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.06em; text-transform: uppercase;
|
||||
margin-bottom: 32px;
|
||||
background: rgba(17, 17, 21, 0.8);
|
||||
}
|
||||
|
||||
.hero-badge .dot {
|
||||
display: inline-block; width: 6px; height: 6px;
|
||||
background: var(--green); border-radius: 50%; margin-right: 8px;
|
||||
box-shadow: 0 0 8px var(--green-glow);
|
||||
position: relative; top: -1px;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 6vw, 4.5rem);
|
||||
font-weight: 700; letter-spacing: -0.04em;
|
||||
line-height: 1.05; margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h1 .deine { color: var(--text); }
|
||||
h1 .sei { color: var(--accent); }
|
||||
h1 .de { color: var(--text-dim); font-weight: 300; }
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem; color: var(--text-dim);
|
||||
max-width: 540px; margin: 0 auto 48px;
|
||||
line-height: 1.7; font-weight: 300;
|
||||
}
|
||||
|
||||
.hero p strong { color: var(--text); font-weight: 500; }
|
||||
|
||||
.cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 14px 28px; border-radius: 10px;
|
||||
font-size: 0.9rem; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.2s; border: none; cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent); color: #fff;
|
||||
box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
.btn-primary:hover { background: #5558e6; transform: translateY(-1px); box-shadow: 0 0 50px var(--accent-glow); }
|
||||
|
||||
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
|
||||
.btn-ghost:hover { color: var(--text); border-color: #2a2a35; background: rgba(17,17,21,0.8); }
|
||||
|
||||
/* Sections */
|
||||
section { padding: 100px 0; }
|
||||
.section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
|
||||
h2 { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 16px; }
|
||||
.section-desc { color: var(--text-dim); font-size: 1rem; max-width: 520px; margin-bottom: 56px; font-weight: 300; line-height: 1.7; }
|
||||
.divider { height: 1px; background: var(--border); max-width: 860px; margin: 0 auto; }
|
||||
|
||||
/* Process */
|
||||
.process-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 14px; padding: 32px;
|
||||
transition: all 0.3s; position: relative;
|
||||
}
|
||||
|
||||
.step::before {
|
||||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
||||
background: linear-gradient(90deg, var(--accent), transparent);
|
||||
border-radius: 14px 14px 0 0; opacity: 0; transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.step:hover { border-color: #2a2a35; transform: translateY(-2px); }
|
||||
.step:hover::before { opacity: 1; }
|
||||
|
||||
.step-num {
|
||||
font-size: 2.5rem; font-weight: 700;
|
||||
color: var(--accent); opacity: 0.2; line-height: 1; margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
|
||||
.step p { color: var(--text-dim); font-size: 0.86rem; line-height: 1.6; font-weight: 300; }
|
||||
|
||||
/* Packages */
|
||||
.packages {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.package {
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 14px; padding: 32px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.package.featured {
|
||||
border-color: var(--accent);
|
||||
background: linear-gradient(135deg, var(--bg-card) 0%, var(--accent-subtle) 100%);
|
||||
}
|
||||
|
||||
.package:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
|
||||
|
||||
.package-name {
|
||||
font-size: 0.65rem; font-weight: 600;
|
||||
letter-spacing: 0.15em; text-transform: uppercase;
|
||||
color: var(--accent); margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.package h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
|
||||
.package .price-note { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 20px; }
|
||||
|
||||
.package ul { list-style: none; }
|
||||
.package li {
|
||||
font-size: 0.84rem; color: var(--text-dim); font-weight: 300;
|
||||
padding: 6px 0; border-bottom: 1px solid rgba(30,30,38,0.5);
|
||||
}
|
||||
.package li:last-child { border-bottom: none; }
|
||||
.package li::before { content: '✓ '; color: var(--green); font-weight: 600; }
|
||||
|
||||
/* CTA */
|
||||
.cta-section { text-align: center; padding: 80px 0 120px; }
|
||||
.cta-section h2 { margin-bottom: 12px; }
|
||||
.cta-section .section-desc { margin: 0 auto 40px; }
|
||||
|
||||
footer { padding: 40px 0; text-align: center; border-top: 1px solid var(--border); }
|
||||
footer p { color: var(--text-muted); font-size: 0.75rem; }
|
||||
|
||||
@media (max-width: 768px) { .process-steps, .packages { grid-template-columns: 1fr; } }
|
||||
@media (max-width: 640px) { .hero { padding: 140px 0 80px; } section { padding: 64px 0; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo"><span class="deine">deine</span><span class="sei">Sei</span><span class="de">.de</span></div>
|
||||
<a href="#kontakt">Projekt starten</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-badge">
|
||||
<span class="dot"></span>Jetzt verfügbar
|
||||
</div>
|
||||
<h1><span class="deine">deine</span><span class="sei">Sei</span><span class="de">.de</span></h1>
|
||||
<p>
|
||||
<strong>Deine Webseite</strong>, gebaut in Minuten. Nicht Wochen.
|
||||
Domain, Design, Hosting, SSL — alles aus einer Hand. Du sagst was du brauchst,
|
||||
wir liefern.
|
||||
</p>
|
||||
<div class="cta-group">
|
||||
<a href="#kontakt" class="btn btn-primary">Projekt starten</a>
|
||||
<a href="#wie" class="btn btn-ghost">So funktioniert's</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="wie">
|
||||
<div class="container">
|
||||
<div class="section-label">Prozess</div>
|
||||
<h2>Von der Idee zur Seite. Schnell.</h2>
|
||||
<div class="section-desc">
|
||||
Kein WordPress-Dschungel, kein Baukasten-Frust.
|
||||
Du beschreibst dein Projekt — wir bauen es.
|
||||
</div>
|
||||
|
||||
<div class="process-steps">
|
||||
<div class="step">
|
||||
<div class="step-num">01</div>
|
||||
<h3>Briefing</h3>
|
||||
<p>Erzähl uns, worum es geht. Name, Branche, was die Seite können soll. Per Mail, WhatsApp oder Anruf.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">02</div>
|
||||
<h3>Design & Build</h3>
|
||||
<p>Wir designen und bauen deine Seite. Responsive, schnell, modern. Du bekommst einen Entwurf zum Reviewen.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">03</div>
|
||||
<h3>Live</h3>
|
||||
<p>Domain registriert, SSL-Zertifikat aktiv, Seite online. Fertig. Änderungen jederzeit möglich.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="pakete">
|
||||
<div class="container">
|
||||
<div class="section-label">Pakete</div>
|
||||
<h2>Was passt zu dir?</h2>
|
||||
<div class="section-desc">
|
||||
Jede Seite ist individuell. Aber als Orientierung:
|
||||
</div>
|
||||
|
||||
<div class="packages">
|
||||
<div class="package">
|
||||
<div class="package-name">Visitenkarte</div>
|
||||
<h3>One-Pager</h3>
|
||||
<p class="price-note">Ab 99 €</p>
|
||||
<ul>
|
||||
<li>Eine Seite, alles drauf</li>
|
||||
<li>Domain inklusive (.de)</li>
|
||||
<li>HTTPS + Hosting</li>
|
||||
<li>Responsive Design</li>
|
||||
<li>Kontaktformular / E-Mail</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="package featured">
|
||||
<div class="package-name">Standard</div>
|
||||
<h3>Multi-Page</h3>
|
||||
<p class="price-note">Ab 299 €</p>
|
||||
<ul>
|
||||
<li>Mehrere Seiten</li>
|
||||
<li>Domain + E-Mail</li>
|
||||
<li>CMS für eigene Änderungen</li>
|
||||
<li>SEO-Grundlagen</li>
|
||||
<li>Analytics</li>
|
||||
<li>3 Monate Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="package">
|
||||
<div class="package-name">Custom</div>
|
||||
<h3>Maßarbeit</h3>
|
||||
<p class="price-note">Auf Anfrage</p>
|
||||
<ul>
|
||||
<li>Web-App / Portal</li>
|
||||
<li>API-Anbindungen</li>
|
||||
<li>Datenbanken</li>
|
||||
<li>Automatisierungen</li>
|
||||
<li>Laufende Betreuung</li>
|
||||
<li>Alles, was du brauchst</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="kontakt" class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-label">Los geht's</div>
|
||||
<h2>Deine Seite wartet.</h2>
|
||||
<div class="section-desc">
|
||||
Schreib uns, was du brauchst. Wir melden uns innerhalb von 24 Stunden
|
||||
mit einem Vorschlag.
|
||||
</div>
|
||||
<a href="mailto:deinesei@msbls.de?subject=deineSei.de%20—%20Projekt" class="btn btn-primary">Projekt anfragen</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><span style="color:var(--text-dim)">deine</span><span style="color:var(--accent)">Sei</span>.de — ein Projekt von msbls.de</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/deinesei.de/site.yaml
Normal file
4
sites/deinesei.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: deinesei.de
|
||||
template: custom
|
||||
title: "deineSei.de — Wir bauen dir deine Seite"
|
||||
description: "deineSei.de — Deine Webseite, gebaut in Minuten. Domain, Design, Hosting — alles aus einer Hand."
|
||||
469
sites/derkaiseristnackt.de/index.html
Normal file
469
sites/derkaiseristnackt.de/index.html
Normal file
@@ -0,0 +1,469 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Der Kaiser ist nackt. — Eine ehrliche Bestandsaufnahme der KI-Revolution</title>
|
||||
<meta name="description" content="Eine Initiative für ehrliche KI-Kommunikation. Kritik ist kein Pessimismus. Es ist Qualitätskontrolle.">
|
||||
<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=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--black: #0a0a0a;
|
||||
--white: #f5f5f0;
|
||||
--red: #c8102e;
|
||||
--red-dark: #a00d24;
|
||||
--grey: #888;
|
||||
--grey-light: #e0e0dc;
|
||||
--grey-dark: #333;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ── Hero ── */
|
||||
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, rgba(200, 16, 46, 0.06) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 50%, rgba(200, 16, 46, 0.04) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
font-weight: 900;
|
||||
font-size: clamp(3.5rem, 10vw, 9rem);
|
||||
line-height: 1.0;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-title .nackt {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: clamp(1rem, 2.5vw, 1.5rem);
|
||||
color: var(--grey);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.hero-line {
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: var(--red);
|
||||
margin: 2.5rem auto;
|
||||
}
|
||||
|
||||
.scroll-hint {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--grey);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.scroll-hint::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: var(--grey);
|
||||
margin: 0.75rem auto 0;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.3; height: 40px; }
|
||||
50% { opacity: 0.8; height: 55px; }
|
||||
}
|
||||
|
||||
/* ── Manifesto ── */
|
||||
|
||||
.manifesto {
|
||||
padding: 8rem 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.manifesto-item {
|
||||
margin-bottom: 4rem;
|
||||
padding-left: 2rem;
|
||||
border-left: 2px solid var(--grey-dark);
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.manifesto-item:hover {
|
||||
border-left-color: var(--red);
|
||||
}
|
||||
|
||||
.manifesto-item p {
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
font-size: clamp(1.3rem, 3vw, 1.75rem);
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.manifesto-item .number {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
color: var(--red);
|
||||
letter-spacing: 0.1em;
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* ── Divider ── */
|
||||
|
||||
.divider {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--grey-dark), transparent);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ── Comparison ── */
|
||||
|
||||
.comparison {
|
||||
padding: 6rem 2rem 8rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.comparison-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.comparison-col {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.comparison-col--stimmt {
|
||||
border-right: 1px solid var(--grey-dark);
|
||||
}
|
||||
|
||||
.comparison-col h3 {
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.comparison-col--stimmt h3 {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.comparison-col--nicht h3 {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.comparison-col ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.comparison-col li {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-left: 1.25rem;
|
||||
position: relative;
|
||||
color: var(--grey-light);
|
||||
}
|
||||
|
||||
.comparison-col--stimmt li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.6em;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--white);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comparison-col--nicht li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.55em;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
/* ── CTA / Quote ── */
|
||||
|
||||
.cta {
|
||||
padding: 8rem 2rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, var(--black) 0%, #0f0f0f 50%, var(--black) 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cta::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1px;
|
||||
height: 80px;
|
||||
background: linear-gradient(to bottom, var(--grey-dark), transparent);
|
||||
}
|
||||
|
||||
.cta-quote {
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
font-size: clamp(1.75rem, 4vw, 3rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
.cta-quote .highlight {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.cta-sub {
|
||||
font-size: 1rem;
|
||||
color: var(--grey);
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
|
||||
.footer {
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
font-size: 0.8rem;
|
||||
color: var(--grey);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.footer-mark {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--red);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* ── Mobile ── */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.comparison-col--stimmt {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--grey-dark);
|
||||
}
|
||||
|
||||
.comparison-col {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.manifesto {
|
||||
padding: 5rem 1.5rem;
|
||||
}
|
||||
|
||||
.manifesto-item {
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
padding: 4rem 1.5rem 5rem;
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding: 5rem 1.5rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<h1 class="hero-title">Der Kaiser<br>ist <span class="nackt">nackt.</span></h1>
|
||||
<div class="hero-line"></div>
|
||||
<p class="hero-subtitle">Eine ehrliche Bestandsaufnahme der KI-Revolution</p>
|
||||
<div class="scroll-hint">Weiterlesen</div>
|
||||
</section>
|
||||
|
||||
<!-- Manifesto -->
|
||||
<section class="manifesto">
|
||||
<div class="section-label">Manifest</div>
|
||||
|
||||
<div class="manifesto-item">
|
||||
<span class="number">01</span>
|
||||
<p>Dein Chatbot lügt. Er weiß es nicht, du weißt es nicht, und niemand will darüber reden.</p>
|
||||
</div>
|
||||
|
||||
<div class="manifesto-item">
|
||||
<span class="number">02</span>
|
||||
<p>97% Genauigkeit klingt gut — bis du zu den 3% gehörst.</p>
|
||||
</div>
|
||||
|
||||
<div class="manifesto-item">
|
||||
<span class="number">03</span>
|
||||
<p>„KI-gestützt“ ist das neue „Bio“ — steht überall drauf, steckt selten drin.</p>
|
||||
</div>
|
||||
|
||||
<div class="manifesto-item">
|
||||
<span class="number">04</span>
|
||||
<p>Ein Sprachmodell, das halluziniert, ist kein Bug. Es ist das Produkt.</p>
|
||||
</div>
|
||||
|
||||
<div class="manifesto-item">
|
||||
<span class="number">05</span>
|
||||
<p>Wir haben Maschinen gebaut, die überzeugend klingen. Das ist nicht dasselbe wie Maschinen, die Recht haben.</p>
|
||||
</div>
|
||||
|
||||
<div class="manifesto-item">
|
||||
<span class="number">06</span>
|
||||
<p>Jedes Startup verspricht AGI bis 2027. Keines kann zuverlässig eine Rechnung zusammenfassen.</p>
|
||||
</div>
|
||||
|
||||
<div class="manifesto-item">
|
||||
<span class="number">07</span>
|
||||
<p>Die größte Leistung der KI-Branche ist nicht Intelligenz. Es ist Marketing.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"><div class="divider-line"></div></div>
|
||||
|
||||
<!-- Comparison -->
|
||||
<section class="comparison">
|
||||
<div class="section-label">Bestandsaufnahme</div>
|
||||
|
||||
<div class="comparison-grid">
|
||||
<div class="comparison-col comparison-col--stimmt">
|
||||
<h3>Was stimmt</h3>
|
||||
<ul>
|
||||
<li>KI erkennt Muster in medizinischen Bildern, die Menschen übersehen — und rettet damit Leben.</li>
|
||||
<li>Sprachmodelle sind brillante Werkzeuge für Textarbeit: Zusammenfassungen, Übersetzungen, Entwürfe.</li>
|
||||
<li>Automatisierung repetitiver Aufgaben spart reale Arbeitsstunden, jeden Tag.</li>
|
||||
<li>KI-gestützte Wissenschaft beschleunigt Materialforschung und Medikamentenentwicklung messbar.</li>
|
||||
<li>Barrierefreiheit wird durch KI-Transkription, Bildbeschreibung und Sprachsynthese konkret besser.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="comparison-col comparison-col--nicht">
|
||||
<h3>Was nicht stimmt</h3>
|
||||
<ul>
|
||||
<li>„KI ersetzt Programmierer bis 2025.“ — Stand heute: Sie erzeugt Code, den Programmierer debuggen müssen.</li>
|
||||
<li>„AGI steht kurz bevor.“ — Wir haben bessere Autokorrektur gebaut, keine Intelligenz.</li>
|
||||
<li>„KI versteht dich.“ — Sie berechnet wahrscheinliche Antworten. Verstehen sieht anders aus.</li>
|
||||
<li>„Unser KI-Assistent steigert die Produktivität um 40%.“ — Gemessen von der Firma, die ihn verkauft.</li>
|
||||
<li>„KI ist neutral und objektiv.“ — Sie reproduziert die Verzerrungen ihrer Trainingsdaten, systematisch und skaliert.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta">
|
||||
<blockquote class="cta-quote">
|
||||
Kritik ist kein Pessimismus.<br><span class="highlight">Es ist Qualitätskontrolle.</span>
|
||||
</blockquote>
|
||||
<p class="cta-sub">Wir lieben, was KI wirklich kann. Wir sagen nur auch, wenn sie es nicht kann.</p>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="footer-mark"></div>
|
||||
<p>Eine Initiative für ehrliche KI-Kommunikation</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/derkaiseristnackt.de/site.yaml
Normal file
4
sites/derkaiseristnackt.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: derkaiseristnackt.de
|
||||
template: custom
|
||||
title: "Der Kaiser ist nackt. — Eine ehrliche Bestandsaufnahme der KI-Revolution"
|
||||
description: "Eine Initiative für ehrliche KI-Kommunikation. Kritik ist kein Pessimismus. Es ist Qualitätskontrolle."
|
||||
12
sites/dumusst.com/site.yaml
Normal file
12
sites/dumusst.com/site.yaml
Normal file
@@ -0,0 +1,12 @@
|
||||
domain: dumusst.com
|
||||
aliases:
|
||||
- dumusst.de
|
||||
- dumusstnicht.com
|
||||
- dumusstnicht.de
|
||||
template: custom
|
||||
title: "Du musst."
|
||||
description: "Du musst. Punkt."
|
||||
# NOTE: This is a dynamic Bun app (server.ts), not a static site.
|
||||
# It generates different pages based on URL path and domain.
|
||||
# Keep running as a separate container until a static fallback is built.
|
||||
dynamic: true
|
||||
899
sites/elefantenhor.de/index.html
Normal file
899
sites/elefantenhor.de/index.html
Normal file
@@ -0,0 +1,899 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ElefantenHor.de — Die Horde kommt.</title>
|
||||
<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=Passion+One:wght@400;700;900&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--earth-dark: #2C1810;
|
||||
--earth-brown: #5C3D2E;
|
||||
--earth-warm: #8B6914;
|
||||
--dust: #D4A853;
|
||||
--dust-light: #E8D5A3;
|
||||
--savanna: #7A8B3C;
|
||||
--savanna-dark: #4A5C1C;
|
||||
--cream: #F5ECD7;
|
||||
--danger-red: #C0392B;
|
||||
--danger-orange: #E67E22;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: var(--cream);
|
||||
color: var(--earth-dark);
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* === SHAKE ANIMATIONS === */
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
5% { transform: translate(-3px, 2px) rotate(-0.5deg); }
|
||||
10% { transform: translate(4px, -1px) rotate(0.8deg); }
|
||||
15% { transform: translate(-5px, 3px) rotate(-1deg); }
|
||||
20% { transform: translate(6px, -2px) rotate(1.2deg); }
|
||||
25% { transform: translate(-4px, 4px) rotate(-0.8deg); }
|
||||
30% { transform: translate(5px, -3px) rotate(1deg); }
|
||||
35% { transform: translate(-6px, 2px) rotate(-1.2deg); }
|
||||
40% { transform: translate(3px, -4px) rotate(0.6deg); }
|
||||
45% { transform: translate(-2px, 3px) rotate(-0.4deg); }
|
||||
50% { transform: translate(4px, -1px) rotate(0.8deg); }
|
||||
55% { transform: translate(-5px, 2px) rotate(-1deg); }
|
||||
60% { transform: translate(6px, -3px) rotate(1.2deg); }
|
||||
65% { transform: translate(-3px, 4px) rotate(-0.6deg); }
|
||||
70% { transform: translate(5px, -2px) rotate(1deg); }
|
||||
75% { transform: translate(-4px, 1px) rotate(-0.8deg); }
|
||||
80% { transform: translate(3px, -3px) rotate(0.5deg); }
|
||||
85% { transform: translate(-2px, 2px) rotate(-0.3deg); }
|
||||
90% { transform: translate(1px, -1px) rotate(0.2deg); }
|
||||
95% { transform: translate(-1px, 1px) rotate(-0.1deg); }
|
||||
}
|
||||
|
||||
@keyframes shake-heavy {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
5% { transform: translate(-8px, 5px) rotate(-1.5deg); }
|
||||
10% { transform: translate(10px, -3px) rotate(2deg); }
|
||||
15% { transform: translate(-12px, 7px) rotate(-2.5deg); }
|
||||
20% { transform: translate(14px, -5px) rotate(3deg); }
|
||||
25% { transform: translate(-10px, 8px) rotate(-2deg); }
|
||||
30% { transform: translate(12px, -6px) rotate(2.5deg); }
|
||||
35% { transform: translate(-8px, 4px) rotate(-1.5deg); }
|
||||
40% { transform: translate(6px, -3px) rotate(1deg); }
|
||||
45% { transform: translate(-4px, 2px) rotate(-0.8deg); }
|
||||
50% { transform: translate(3px, -1px) rotate(0.5deg); }
|
||||
60% { transform: translate(-2px, 1px) rotate(-0.3deg); }
|
||||
70% { transform: translate(1px, -1px) rotate(0.2deg); }
|
||||
80% { transform: translate(-1px, 0px) rotate(-0.1deg); }
|
||||
90% { transform: translate(0px, 0px) rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes wobble {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
15% { transform: rotate(-5deg); }
|
||||
30% { transform: rotate(4deg); }
|
||||
45% { transform: rotate(-3deg); }
|
||||
60% { transform: rotate(2deg); }
|
||||
75% { transform: rotate(-1deg); }
|
||||
90% { transform: rotate(0.5deg); }
|
||||
}
|
||||
|
||||
@keyframes dust-rise {
|
||||
0% { opacity: 0; transform: translateY(0) scale(1); }
|
||||
20% { opacity: 0.6; }
|
||||
100% { opacity: 0; transform: translateY(-80px) scale(2.5); }
|
||||
}
|
||||
|
||||
@keyframes crack-spread {
|
||||
0% { width: 0; opacity: 0; }
|
||||
30% { opacity: 1; }
|
||||
100% { width: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes pulse-danger {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
@keyframes footprint-appear {
|
||||
0% { opacity: 0; transform: scale(0.5); }
|
||||
50% { opacity: 0.3; transform: scale(1.1); }
|
||||
100% { opacity: 0.15; transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes meter-fill {
|
||||
0% { width: 20%; }
|
||||
50% { width: 95%; }
|
||||
100% { width: 20%; }
|
||||
}
|
||||
|
||||
.shaking .shake-target {
|
||||
animation: shake 2s ease-in-out;
|
||||
}
|
||||
|
||||
.shaking .shake-heavy-target {
|
||||
animation: shake-heavy 2.5s ease-in-out;
|
||||
}
|
||||
|
||||
.shaking .wobble-target {
|
||||
animation: wobble 1.8s ease-in-out;
|
||||
}
|
||||
|
||||
.shaking .dust-particle {
|
||||
animation: dust-rise 2s ease-out forwards;
|
||||
}
|
||||
|
||||
.shaking .crack-line {
|
||||
animation: crack-spread 2.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.shaking .danger-pulse {
|
||||
animation: pulse-danger 0.3s ease-in-out 6;
|
||||
}
|
||||
|
||||
/* === LAYOUT === */
|
||||
.page-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* === HERO === */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(ellipse at 30% 80%, rgba(122, 139, 60, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 70% 20%, rgba(212, 168, 83, 0.2) 0%, transparent 50%),
|
||||
linear-gradient(180deg, var(--cream) 0%, #EDE0C0 60%, #D4C4A0 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120px;
|
||||
background: linear-gradient(0deg, var(--earth-brown) 0%, transparent 100%);
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.elephant-hero {
|
||||
font-size: clamp(6rem, 15vw, 12rem);
|
||||
line-height: 1;
|
||||
margin-bottom: 1rem;
|
||||
filter: drop-shadow(0 8px 24px rgba(44, 24, 16, 0.3));
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.title-main {
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: clamp(3rem, 10vw, 8rem);
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--earth-dark);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.title-main .de {
|
||||
color: var(--savanna);
|
||||
}
|
||||
|
||||
.title-main .dot {
|
||||
color: var(--danger-red);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.2rem, 3vw, 2rem);
|
||||
color: var(--earth-brown);
|
||||
margin-top: 1rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.scroll-hint {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--earth-brown);
|
||||
opacity: 0.6;
|
||||
letter-spacing: 0.1em;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.scroll-hint span {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
/* Dust particles container */
|
||||
.dust-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 200px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dust-particle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--dust);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dust-particle:nth-child(1) { left: 10%; animation-delay: 0.1s; }
|
||||
.dust-particle:nth-child(2) { left: 25%; animation-delay: 0.3s; width: 12px; height: 12px; }
|
||||
.dust-particle:nth-child(3) { left: 40%; animation-delay: 0.0s; width: 6px; height: 6px; }
|
||||
.dust-particle:nth-child(4) { left: 55%; animation-delay: 0.2s; }
|
||||
.dust-particle:nth-child(5) { left: 70%; animation-delay: 0.15s; width: 10px; height: 10px; }
|
||||
.dust-particle:nth-child(6) { left: 85%; animation-delay: 0.35s; width: 5px; height: 5px; }
|
||||
.dust-particle:nth-child(7) { left: 15%; animation-delay: 0.25s; width: 7px; height: 7px; }
|
||||
.dust-particle:nth-child(8) { left: 60%; animation-delay: 0.05s; width: 9px; height: 9px; }
|
||||
|
||||
/* Crack lines */
|
||||
.crack-container {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.crack-line {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--earth-brown), transparent);
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.crack-line:nth-child(1) { left: 5%; top: 0; }
|
||||
.crack-line:nth-child(2) { left: 30%; top: 10px; animation-delay: 0.3s; }
|
||||
.crack-line:nth-child(3) { left: 60%; top: -5px; animation-delay: 0.15s; }
|
||||
|
||||
/* === WARNING BAR === */
|
||||
.warning-bar {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--danger-orange),
|
||||
var(--danger-orange) 20px,
|
||||
var(--earth-dark) 20px,
|
||||
var(--earth-dark) 40px
|
||||
);
|
||||
padding: 1rem 2rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.warning-bar-inner {
|
||||
background: var(--earth-dark);
|
||||
color: var(--danger-orange);
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.8rem 2rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.warning-bar-inner .blink-dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--danger-red);
|
||||
border-radius: 50%;
|
||||
margin: 0 0.8rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* === SECTIONS === */
|
||||
section {
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
color: var(--earth-dark);
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* === STAMPEDE WARNINGS === */
|
||||
.stampede-section {
|
||||
background: linear-gradient(180deg, #EDE0C0 0%, var(--cream) 100%);
|
||||
}
|
||||
|
||||
.warnings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 20px rgba(44, 24, 16, 0.08);
|
||||
border-left: 5px solid var(--danger-red);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.warning-card:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.warning-card.level-critical { border-left-color: var(--danger-red); }
|
||||
.warning-card.level-high { border-left-color: var(--danger-orange); }
|
||||
.warning-card.level-medium { border-left-color: var(--dust); }
|
||||
|
||||
.warning-level {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.level-critical .warning-level { background: #FDEDEC; color: var(--danger-red); }
|
||||
.level-high .warning-level { background: #FDF2E9; color: var(--danger-orange); }
|
||||
.level-medium .warning-level { background: #FEF9E7; color: var(--earth-warm); }
|
||||
|
||||
.warning-card h3 {
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--earth-dark);
|
||||
}
|
||||
|
||||
.warning-card p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: var(--earth-brown);
|
||||
}
|
||||
|
||||
.warning-card .warning-emoji {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 1.8rem;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
/* === HERD METER === */
|
||||
.meter-section {
|
||||
background: var(--earth-dark);
|
||||
color: var(--cream);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.meter-section .section-title {
|
||||
color: var(--dust);
|
||||
}
|
||||
|
||||
.meter-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.meter-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--dust-light);
|
||||
}
|
||||
|
||||
.meter-bar {
|
||||
height: 32px;
|
||||
background: var(--earth-brown);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 2px solid var(--dust);
|
||||
}
|
||||
|
||||
.meter-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--savanna), var(--danger-orange), var(--danger-red));
|
||||
border-radius: 14px;
|
||||
width: 20%;
|
||||
transition: width 0.5s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shaking .meter-fill {
|
||||
animation: meter-fill 2.5s ease-in-out;
|
||||
}
|
||||
|
||||
.meter-value {
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-size: 4rem;
|
||||
color: var(--danger-orange);
|
||||
margin-top: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.meter-value span {
|
||||
font-size: 1.5rem;
|
||||
color: var(--dust-light);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.meter-subtitle {
|
||||
font-size: 0.9rem;
|
||||
color: var(--dust-light);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* === FACTS === */
|
||||
.facts-section {
|
||||
background: linear-gradient(180deg, var(--cream) 0%, #EDE0C0 100%);
|
||||
}
|
||||
|
||||
.facts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1.5rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.fact-card {
|
||||
text-align: center;
|
||||
padding: 2rem 1.5rem;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px rgba(44, 24, 16, 0.06);
|
||||
}
|
||||
|
||||
.fact-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.fact-number {
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-size: 2.8rem;
|
||||
color: var(--earth-dark);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.fact-unit {
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-size: 1.2rem;
|
||||
color: var(--savanna);
|
||||
}
|
||||
|
||||
.fact-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--earth-brown);
|
||||
margin-top: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* === FOOTPRINTS === */
|
||||
.footprints-section {
|
||||
background: var(--earth-brown);
|
||||
padding: 3rem 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.footprint {
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
opacity: 0;
|
||||
transform: rotate(var(--rot));
|
||||
}
|
||||
|
||||
.shaking .footprint {
|
||||
animation: footprint-appear 2s ease-out forwards;
|
||||
}
|
||||
|
||||
.footprint:nth-child(1) { left: 5%; top: 20%; --rot: -15deg; animation-delay: 0s; }
|
||||
.footprint:nth-child(2) { left: 15%; top: 60%; --rot: -10deg; animation-delay: 0.15s; }
|
||||
.footprint:nth-child(3) { left: 28%; top: 30%; --rot: -20deg; animation-delay: 0.3s; }
|
||||
.footprint:nth-child(4) { left: 38%; top: 70%; --rot: -5deg; animation-delay: 0.45s; }
|
||||
.footprint:nth-child(5) { left: 50%; top: 25%; --rot: -18deg; animation-delay: 0.6s; }
|
||||
.footprint:nth-child(6) { left: 62%; top: 65%; --rot: -12deg; animation-delay: 0.75s; }
|
||||
.footprint:nth-child(7) { left: 75%; top: 35%; --rot: -8deg; animation-delay: 0.9s; }
|
||||
.footprint:nth-child(8) { left: 85%; top: 55%; --rot: -22deg; animation-delay: 1.05s; }
|
||||
|
||||
.footprints-text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
color: var(--dust-light);
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-size: clamp(1.2rem, 3vw, 1.8rem);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* === RUMBLE COUNTER === */
|
||||
.counter-section {
|
||||
background: var(--cream);
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.rumble-counter {
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-size: clamp(3rem, 8vw, 6rem);
|
||||
color: var(--earth-dark);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rumble-counter-label {
|
||||
font-size: 1rem;
|
||||
color: var(--earth-brown);
|
||||
margin-top: 0.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
footer {
|
||||
background: var(--earth-dark);
|
||||
color: var(--dust-light);
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-family: 'Passion One', sans-serif;
|
||||
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.footer-elephants {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
letter-spacing: 0.5rem;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
font-size: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* === MOBILE === */
|
||||
@media (max-width: 600px) {
|
||||
.warnings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.facts-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
section {
|
||||
padding: 3rem 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* === SEISMOGRAPH === */
|
||||
.seismo-section {
|
||||
background: #1a1008;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seismo-section .section-title {
|
||||
color: var(--savanna);
|
||||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||
}
|
||||
|
||||
.seismograph {
|
||||
max-width: 700px;
|
||||
margin: 1.5rem auto 0;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.seismo-line {
|
||||
stroke: var(--savanna);
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.seismo-line-active {
|
||||
stroke: var(--danger-red);
|
||||
stroke-width: 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper" id="page">
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="elephant-hero shake-heavy-target">🐘</div>
|
||||
<h1 class="title-main wobble-target">
|
||||
ElefantenHor<span class="dot">.</span><span class="de">de</span>
|
||||
</h1>
|
||||
<p class="tagline shake-target">Wenn der Boden bebt.</p>
|
||||
|
||||
<div class="dust-container">
|
||||
<div class="dust-particle"></div>
|
||||
<div class="dust-particle"></div>
|
||||
<div class="dust-particle"></div>
|
||||
<div class="dust-particle"></div>
|
||||
<div class="dust-particle"></div>
|
||||
<div class="dust-particle"></div>
|
||||
<div class="dust-particle"></div>
|
||||
<div class="dust-particle"></div>
|
||||
</div>
|
||||
|
||||
<div class="crack-container">
|
||||
<div class="crack-line"></div>
|
||||
<div class="crack-line"></div>
|
||||
<div class="crack-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-hint shake-target">
|
||||
BODEN BEOBACHTEN
|
||||
<span>▾</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WARNING BAR -->
|
||||
<div class="warning-bar">
|
||||
<div class="warning-bar-inner shake-target danger-pulse">
|
||||
<span class="blink-dot"></span>
|
||||
Stampede-Warnung aktiv
|
||||
<span class="blink-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STAMPEDE WARNINGS -->
|
||||
<section class="stampede-section">
|
||||
<h2 class="section-title shake-target">Aktuelle Stampede-Warnungen</h2>
|
||||
<div class="warnings-grid">
|
||||
<div class="warning-card level-critical wobble-target">
|
||||
<span class="warning-level">Kritisch</span>
|
||||
<span class="warning-emoji">💥</span>
|
||||
<h3>Sektor 7 — Wohnzimmer</h3>
|
||||
<p>Herde von 43 Elefanten im Anmarsch. Geschätzte Ankunft: jetzt. Vasen sichern. Sofa aufgeben.</p>
|
||||
</div>
|
||||
<div class="warning-card level-high shake-target">
|
||||
<span class="warning-level">Hoch</span>
|
||||
<span class="warning-emoji">🌍</span>
|
||||
<h3>Seismische Aktivität</h3>
|
||||
<p>Richter-Skala zeigt 4.2 an. Ursache: kein Erdbeben, nur Dienstags-Stampede. Alles normal.</p>
|
||||
</div>
|
||||
<div class="warning-card level-medium wobble-target">
|
||||
<span class="warning-level">Mittel</span>
|
||||
<span class="warning-emoji">🥜</span>
|
||||
<h3>Erdnuss-Vorräte kritisch</h3>
|
||||
<p>Lagerbestand unter 2 Tonnen gefallen. Notfall-Lieferung aus Tansania unterwegs. ETA: 3 Stunden.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SEISMOGRAPH -->
|
||||
<section class="seismo-section">
|
||||
<h2 class="section-title shake-target">Live-Seismograph</h2>
|
||||
<div class="seismograph">
|
||||
<svg id="seismo-svg" width="100%" height="100" viewBox="0 0 700 100" preserveAspectRatio="none">
|
||||
<path id="seismo-path" class="seismo-line" d="M0,50 L700,50"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HERD METER -->
|
||||
<section class="meter-section">
|
||||
<h2 class="section-title shake-target">Herdenmesser</h2>
|
||||
<div class="meter-container">
|
||||
<div class="meter-label">
|
||||
<span>Ruhig</span>
|
||||
<span>Stampede</span>
|
||||
</div>
|
||||
<div class="meter-bar shake-target">
|
||||
<div class="meter-fill" id="meter-fill"></div>
|
||||
</div>
|
||||
<div class="meter-value" id="meter-value">
|
||||
23 <span>Elefanten</span>
|
||||
</div>
|
||||
<p class="meter-subtitle">Aktuelle Herdenstärke im Einzugsgebiet</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FACTS -->
|
||||
<section class="facts-section">
|
||||
<h2 class="section-title wobble-target">Unnützes Elefantenwissen</h2>
|
||||
<div class="facts-grid">
|
||||
<div class="fact-card shake-target">
|
||||
<div class="fact-icon">🦶</div>
|
||||
<div class="fact-number">6.000</div>
|
||||
<div class="fact-unit">kg</div>
|
||||
<p class="fact-desc">wiegt ein ausgewachsener Bulle. Dein Boden so: 💀</p>
|
||||
</div>
|
||||
<div class="fact-card wobble-target">
|
||||
<div class="fact-icon">👂</div>
|
||||
<div class="fact-number">32</div>
|
||||
<div class="fact-unit">km</div>
|
||||
<p class="fact-desc">weit hören Elefanten Infraschall. Du hörst sie erst bei 32 Metern.</p>
|
||||
</div>
|
||||
<div class="fact-card shake-target">
|
||||
<div class="fact-icon">💨</div>
|
||||
<div class="fact-number">40</div>
|
||||
<div class="fact-unit">km/h</div>
|
||||
<p class="fact-desc">Spitze bei Stampede. Du schaffst 15. Viel Glück.</p>
|
||||
</div>
|
||||
<div class="fact-card wobble-target">
|
||||
<div class="fact-icon">🧠</div>
|
||||
<div class="fact-number">5</div>
|
||||
<div class="fact-unit">kg</div>
|
||||
<p class="fact-desc">Gehirn. Größtes aller Landtiere. Vergisst nie. Nie.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTPRINTS -->
|
||||
<section class="footprints-section">
|
||||
<div class="footprint">🐾</div>
|
||||
<div class="footprint">🐾</div>
|
||||
<div class="footprint">🐾</div>
|
||||
<div class="footprint">🐾</div>
|
||||
<div class="footprint">🐾</div>
|
||||
<div class="footprint">🐾</div>
|
||||
<div class="footprint">🐾</div>
|
||||
<div class="footprint">🐾</div>
|
||||
<p class="footprints-text">Die Spuren führen immer hierher.</p>
|
||||
</section>
|
||||
|
||||
<!-- RUMBLE COUNTER -->
|
||||
<section class="counter-section">
|
||||
<div class="section-title">Erschütterungen seit Seitenaufruf</div>
|
||||
<div class="rumble-counter shake-heavy-target" id="rumble-count">0</div>
|
||||
<p class="rumble-counter-label">und es werden mehr.</p>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p class="footer-text shake-target">Hier war mal eine Webseite. Dann kam die Horde.</p>
|
||||
<div class="footer-elephants wobble-target">🐘 🐘 🐘 🐘 🐘</div>
|
||||
<p class="footer-copy">© 2026 ElefantenHor.de — Alle Rechte zertrampelt.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Stampede controller
|
||||
const page = document.getElementById('page');
|
||||
const rumbleCountEl = document.getElementById('rumble-count');
|
||||
const meterFill = document.getElementById('meter-fill');
|
||||
const meterValue = document.getElementById('meter-value');
|
||||
let rumbleCount = 0;
|
||||
let seismoActive = false;
|
||||
|
||||
function triggerStampede() {
|
||||
rumbleCount++;
|
||||
rumbleCountEl.textContent = rumbleCount;
|
||||
|
||||
// Random herd size during stampede
|
||||
const herdSize = Math.floor(Math.random() * 80) + 15;
|
||||
meterValue.innerHTML = herdSize + ' <span>Elefanten</span>';
|
||||
|
||||
page.classList.add('shaking');
|
||||
seismoActive = true;
|
||||
|
||||
// Remove after animation completes
|
||||
setTimeout(() => {
|
||||
page.classList.remove('shaking');
|
||||
seismoActive = false;
|
||||
// Reset meter value after calm
|
||||
setTimeout(() => {
|
||||
const calmSize = Math.floor(Math.random() * 15) + 5;
|
||||
meterValue.innerHTML = calmSize + ' <span>Elefanten</span>';
|
||||
}, 500);
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
// First stampede after 3 seconds, then every 8-12 seconds
|
||||
setTimeout(triggerStampede, 3000);
|
||||
setInterval(() => {
|
||||
triggerStampede();
|
||||
}, 8000 + Math.random() * 4000);
|
||||
|
||||
// Fix: re-randomize the interval
|
||||
function scheduleNext() {
|
||||
const delay = 8000 + Math.random() * 4000;
|
||||
setTimeout(() => {
|
||||
triggerStampede();
|
||||
scheduleNext();
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// Seismograph
|
||||
const seismoPath = document.getElementById('seismo-path');
|
||||
const seismoSvg = document.getElementById('seismo-svg');
|
||||
let seismoData = new Array(70).fill(50);
|
||||
|
||||
function updateSeismograph() {
|
||||
// Shift data left
|
||||
seismoData.shift();
|
||||
|
||||
// Add new point
|
||||
if (seismoActive) {
|
||||
seismoData.push(50 + (Math.random() - 0.5) * 80);
|
||||
seismoPath.classList.add('seismo-line-active');
|
||||
} else {
|
||||
seismoData.push(50 + (Math.random() - 0.5) * 4);
|
||||
seismoPath.classList.remove('seismo-line-active');
|
||||
}
|
||||
|
||||
// Build path
|
||||
let d = 'M';
|
||||
seismoData.forEach((y, i) => {
|
||||
const x = (i / (seismoData.length - 1)) * 700;
|
||||
d += (i === 0 ? '' : ' L') + x.toFixed(1) + ',' + y.toFixed(1);
|
||||
});
|
||||
seismoPath.setAttribute('d', d);
|
||||
|
||||
requestAnimationFrame(updateSeismograph);
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateSeismograph);
|
||||
|
||||
// Warning bar blink dots
|
||||
const blinkDots = document.querySelectorAll('.blink-dot');
|
||||
setInterval(() => {
|
||||
blinkDots.forEach(dot => {
|
||||
dot.style.opacity = dot.style.opacity === '0' ? '1' : '0';
|
||||
});
|
||||
}, 800);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/elefantenhor.de/site.yaml
Normal file
4
sites/elefantenhor.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: elefantenhor.de
|
||||
template: custom
|
||||
title: "ElefantenHor.de — Die Horde kommt."
|
||||
description: ""
|
||||
573
sites/fragina.de/index.html
Normal file
573
sites/fragina.de/index.html
Normal file
@@ -0,0 +1,573 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ina Kamps — Knowledge Lawyer | IP, Marke, Green Claims</title>
|
||||
<meta name="description" content="Ina Kamps — Knowledge Lawyer. Markenrecht, Green Claims, Nachhaltigkeit und IP an der Schnittstelle von Recht und Innovation.">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>I</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--bg-elevated: #111115;
|
||||
--bg-card: #16161b;
|
||||
--border: #1e1e26;
|
||||
--text: #e8e8ed;
|
||||
--text-dim: #6e6e7a;
|
||||
--text-muted: #44444f;
|
||||
--accent: #a78bfa;
|
||||
--accent-glow: rgba(167, 139, 250, 0.15);
|
||||
--accent-subtle: rgba(167, 139, 250, 0.08);
|
||||
--green: #34d399;
|
||||
--green-glow: rgba(52, 211, 153, 0.12);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
/* Nav */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
z-index: 100;
|
||||
padding: 20px 0;
|
||||
background: rgba(10, 10, 12, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||||
|
||||
.logo { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
|
||||
.logo .ai { color: var(--accent); font-weight: 700; }
|
||||
|
||||
nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
|
||||
nav a:hover { color: var(--text); }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 180px 0 120px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 80px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 600px; height: 400px;
|
||||
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 32px;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.hero-badge .dot {
|
||||
display: inline-block;
|
||||
width: 6px; height: 6px;
|
||||
background: var(--green);
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 0 8px var(--green-glow);
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.monogram {
|
||||
width: 96px; height: 96px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin: 0 auto 40px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.6rem, 6vw, 4rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ai { color: var(--accent); }
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-dim);
|
||||
max-width: 580px;
|
||||
margin: 0 auto 20px;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.hero-subtitle strong { color: var(--text); font-weight: 500; }
|
||||
|
||||
.hero-tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 4px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-elevated);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.tag.green { color: var(--green); border-color: rgba(52, 211, 153, 0.2); }
|
||||
|
||||
.cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 14px 28px; border-radius: 10px;
|
||||
font-size: 0.9rem; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.2s; border: none; cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #0a0a0c;
|
||||
box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 50px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent; color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
color: var(--text); border-color: #2a2a35;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section { padding: 100px 0; }
|
||||
|
||||
.section-label {
|
||||
font-size: 0.7rem; font-weight: 600;
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
color: var(--accent); margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h2 { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 16px; }
|
||||
|
||||
.section-desc {
|
||||
color: var(--text-dim); font-size: 1rem;
|
||||
max-width: 520px; margin-bottom: 56px;
|
||||
font-weight: 300; line-height: 1.7;
|
||||
}
|
||||
|
||||
.divider { height: 1px; background: var(--border); max-width: 860px; margin: 0 auto; }
|
||||
|
||||
/* Expertise */
|
||||
.expertise-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.expertise-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 32px;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.expertise-card:hover {
|
||||
border-color: #2a2a35;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.expertise-card.highlight {
|
||||
border-color: rgba(52, 211, 153, 0.2);
|
||||
background: linear-gradient(135deg, var(--bg-card) 0%, rgba(52, 211, 153, 0.03) 100%);
|
||||
}
|
||||
|
||||
.expertise-card.highlight:hover {
|
||||
border-color: rgba(52, 211, 153, 0.35);
|
||||
}
|
||||
|
||||
.expertise-icon {
|
||||
width: 40px; height: 40px;
|
||||
border-radius: 10px;
|
||||
background: var(--accent-subtle);
|
||||
border: 1px solid rgba(167, 139, 250, 0.15);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.85rem; font-weight: 600; color: var(--accent);
|
||||
}
|
||||
|
||||
.expertise-card.highlight .expertise-icon {
|
||||
background: var(--green-glow);
|
||||
border-color: rgba(52, 211, 153, 0.2);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.expertise-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
|
||||
|
||||
.expertise-card.highlight h3 { color: var(--green); }
|
||||
|
||||
.expertise-card p {
|
||||
color: var(--text-dim); font-size: 0.86rem;
|
||||
line-height: 1.6; font-weight: 300;
|
||||
}
|
||||
|
||||
/* Profile */
|
||||
.profile-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 48px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.profile-text p {
|
||||
color: var(--text-dim); font-size: 0.95rem;
|
||||
line-height: 1.8; font-weight: 300; margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.profile-text p:last-child { margin-bottom: 0; }
|
||||
|
||||
.profile-details { display: flex; flex-direction: column; gap: 14px; }
|
||||
|
||||
.detail-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 0.65rem; font-weight: 600;
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
color: var(--accent); margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.detail-value { font-size: 0.9rem; color: var(--text-dim); font-weight: 300; }
|
||||
|
||||
/* Publications */
|
||||
.pub-list { display: flex; flex-direction: column; gap: 14px; }
|
||||
|
||||
.pub-item {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px 28px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.pub-item:hover { border-color: #2a2a35; }
|
||||
|
||||
.pub-year {
|
||||
font-size: 0.65rem; font-weight: 600;
|
||||
letter-spacing: 0.1em; text-transform: uppercase;
|
||||
color: var(--accent); margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pub-title { font-size: 0.95rem; font-weight: 500; margin-bottom: 4px; }
|
||||
.pub-source { font-size: 0.82rem; color: var(--text-muted); font-weight: 300; }
|
||||
|
||||
/* CTA */
|
||||
.cta-section { text-align: center; padding: 80px 0 120px; }
|
||||
.cta-section h2 { margin-bottom: 12px; }
|
||||
.cta-section .section-desc { margin: 0 auto 40px; }
|
||||
|
||||
/* Footer */
|
||||
footer { padding: 40px 0; text-align: center; border-top: 1px solid var(--border); }
|
||||
footer p { color: var(--text-muted); font-size: 0.75rem; }
|
||||
footer a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
|
||||
footer a:hover { color: var(--text-dim); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.expertise-grid { grid-template-columns: 1fr; }
|
||||
.profile-section { grid-template-columns: 1fr; gap: 32px; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero { padding: 140px 0 80px; }
|
||||
section { padding: 64px 0; }
|
||||
.monogram { width: 76px; height: 76px; font-size: 1.3rem; margin-bottom: 32px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo">fr<span class="ai">AGI</span>na</div>
|
||||
<a href="#kontakt">Kontakt</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="monogram">IK</div>
|
||||
<div class="hero-badge">
|
||||
<span class="dot"></span>Knowledge Lawyer
|
||||
</div>
|
||||
<h1>Ina Kamps</h1>
|
||||
<p class="hero-subtitle">
|
||||
<strong>Knowledge Lawyer</strong> fuer IP und Markenrecht.
|
||||
Spezialisiert auf <strong>Green Claims</strong>, nachhaltige Werbung
|
||||
und die Frage, wo Greenwashing aufhoert und echte Kommunikation anfaengt.
|
||||
</p>
|
||||
<div class="hero-tags">
|
||||
<span class="tag">Markenrecht</span>
|
||||
<span class="tag green">Green Claims</span>
|
||||
<span class="tag green">Nachhaltige Werbung</span>
|
||||
<span class="tag">UWG</span>
|
||||
<span class="tag">Legal Design</span>
|
||||
<span class="tag">Metaverse & NFTs</span>
|
||||
</div>
|
||||
<div class="cta-group">
|
||||
<a href="#kontakt" class="btn btn-primary">Kontakt aufnehmen</a>
|
||||
<a href="#expertise" class="btn btn-ghost">Expertise</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="expertise">
|
||||
<div class="container">
|
||||
<div class="section-label">Schwerpunkte</div>
|
||||
<h2>IP trifft Nachhaltigkeit.</h2>
|
||||
<div class="section-desc">
|
||||
Wo Markenrecht, Werbung und Sustainability zusammentreffen,
|
||||
entsteht ein neues Rechtsgebiet. Ina Kamps gestaltet es mit.
|
||||
</div>
|
||||
|
||||
<div class="expertise-grid">
|
||||
<div class="expertise-card highlight">
|
||||
<div class="expertise-icon">GC</div>
|
||||
<h3>Green Claims</h3>
|
||||
<p>
|
||||
Wann ist „klimaneutral" erlaubt? Was fordert die Empco-Richtlinie?
|
||||
Rechtssichere Nachhaltigkeitskommunikation ohne Greenwashing-Risiko.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card highlight">
|
||||
<div class="expertise-icon">GW</div>
|
||||
<h3>Green Advertising</h3>
|
||||
<p>
|
||||
BGH-Rechtsprechung zu Umweltclaims, EU Green Claims Directive,
|
||||
Oeko-Labels und Offsetting — die neue Regulierungslandschaft.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">MR</div>
|
||||
<h3>Markenrecht</h3>
|
||||
<p>
|
||||
Markenstrategie, Anmeldung, Verteidigung. Schutz von Brands
|
||||
im digitalen Raum — von E-Commerce bis Metaverse.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">UW</div>
|
||||
<h3>Wettbewerbsrecht</h3>
|
||||
<p>
|
||||
UWG, irreführende Werbung, vergleichende Werbung.
|
||||
Durchsetzung und Abwehr wettbewerbsrechtlicher Ansprueche.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">MV</div>
|
||||
<h3>Metaverse & NFTs</h3>
|
||||
<p>
|
||||
Markenrecht im virtuellen Raum. NFT-Klassifizierung,
|
||||
Web 4.0, digitale Markenstrategie der naechsten Generation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">LD</div>
|
||||
<h3>Legal Design Thinking</h3>
|
||||
<p>
|
||||
Wissen nutzerzentriert aufbereiten. Innovative Formate
|
||||
fuer Mandanteninformation und Wissenstransfer.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="profil">
|
||||
<div class="container">
|
||||
<div class="section-label">Profil</div>
|
||||
<h2>Wissen. Weitergeben. Wirken.</h2>
|
||||
|
||||
<div class="profile-section">
|
||||
<div class="profile-text">
|
||||
<p>
|
||||
Ina Kamps verbindet ueber 20 Jahre Erfahrung im gewerblichen
|
||||
Rechtsschutz mit einem klaren Blick fuer die Themen, die morgen
|
||||
zaehlen. Als Knowledge Lawyer arbeitet sie an der Schnittstelle
|
||||
von Recht und Wissenstransfer — immer mit dem Ziel, komplexe
|
||||
Zusammenhaenge so aufzubereiten, dass sie in der Praxis wirken.
|
||||
</p>
|
||||
<p>
|
||||
Ihr Schwerpunkt: die rechtlichen Grenzen nachhaltiger Werbung.
|
||||
Von der Empco-Richtlinie ueber das BGH-Urteil zu „klimaneutral"
|
||||
bis zur EU Green Claims Directive — Ina Kamps kennt die
|
||||
Regulierungslandschaft und uebersetzt sie in klare Handlungsempfehlungen.
|
||||
</p>
|
||||
<p>
|
||||
Zusaetzlich lehrt sie an der Universitaet Osnabrueck und engagiert
|
||||
sich in der GRUR und im Deutschen Juristinnenbund.
|
||||
</p>
|
||||
</div>
|
||||
<div class="profile-details">
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Rolle</div>
|
||||
<div class="detail-value">Knowledge Lawyer — IP & Marke</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Standort</div>
|
||||
<div class="detail-value">Duesseldorf</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Ausbildung</div>
|
||||
<div class="detail-value">Rechtsanwaeltin, M.A. Kommunikationswiss. & Politikwiss.</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Lehre</div>
|
||||
<div class="detail-value">Lehrbeauftragte, Universitaet Osnabrueck</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Mitgliedschaften</div>
|
||||
<div class="detail-value">GRUR, djb e.V.</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Sprachen</div>
|
||||
<div class="detail-value">Deutsch, Englisch</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="publikationen">
|
||||
<div class="container">
|
||||
<div class="section-label">Publikationen & Vortraege</div>
|
||||
<h2>Stimme im Diskurs.</h2>
|
||||
<div class="section-desc">
|
||||
Regelmaessige Veroeffentlichungen und Vortraege zu Green Claims,
|
||||
Markenrecht und der digitalen Transformation des IP-Rechts.
|
||||
</div>
|
||||
|
||||
<div class="pub-list">
|
||||
<div class="pub-item">
|
||||
<div class="pub-year">2024</div>
|
||||
<div class="pub-title">The EU's Plans for Green Claims: The Empco Directive</div>
|
||||
<div class="pub-source">Lexology — Co-Autorin</div>
|
||||
</div>
|
||||
<div class="pub-item">
|
||||
<div class="pub-year">2024</div>
|
||||
<div class="pub-title">ESG Academy: Green Advertising — Wann ist Werbung mit Nachhaltigkeit verboten?</div>
|
||||
<div class="pub-source">Vortrag — mit Dr. Wiebke Baars, Andreas Bauer</div>
|
||||
</div>
|
||||
<div class="pub-item">
|
||||
<div class="pub-year">2024</div>
|
||||
<div class="pub-title">BGH „klimaneutral"-Urteil: Neue Anforderungen an Umweltwerbung</div>
|
||||
<div class="pub-source">ESG Connect Session — Vortrag</div>
|
||||
</div>
|
||||
<div class="pub-item">
|
||||
<div class="pub-year">2023</div>
|
||||
<div class="pub-title">More Guidance on Trade Marks and NFTs in the Metaverse</div>
|
||||
<div class="pub-source">Lexology — Co-Autorin mit Dr. Christian Tenkhoff</div>
|
||||
</div>
|
||||
<div class="pub-item">
|
||||
<div class="pub-year">2022 – 2023</div>
|
||||
<div class="pub-title">Bits and Pieces from the Metaverse — Newsletter-Serie</div>
|
||||
<div class="pub-source">Regelmaessige Ausgaben zu IP im virtuellen Raum</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="kontakt" class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-label">Kontakt</div>
|
||||
<h2>Fragen? Fr<span class="ai">AG I</span>na.</h2>
|
||||
<div class="section-desc">
|
||||
Green Claims, Markenrecht, Nachhaltigkeit im IP —
|
||||
sprechen wir darueber.
|
||||
</div>
|
||||
<div class="cta-group">
|
||||
<a href="mailto:ina.kamps@hoganlovells.com" class="btn btn-primary">E-Mail schreiben</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>fr<span style="color: var(--accent);">AGI</span>na.de — Ina Kamps</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/fragina.de/site.yaml
Normal file
4
sites/fragina.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: fragina.de
|
||||
template: custom
|
||||
title: "Ina Kamps — Knowledge Lawyer | IP, Marke, Green Claims"
|
||||
description: "Ina Kamps — Knowledge Lawyer. Markenrecht, Green Claims, Nachhaltigkeit und IP an der Schnittstelle von Recht und Innovation."
|
||||
896
sites/frenchkis.de/index.html
Normal file
896
sites/frenchkis.de/index.html
Normal file
@@ -0,0 +1,896 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>frenchkis.de — Französische Künstliche Intelligenzen</title>
|
||||
<meta name="description" content="French KIs: Alles über französische Künstliche Intelligenzen. Sie streiken, philosophieren und gehen mittags zwei Stunden essen.">
|
||||
<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=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bleu: #002395;
|
||||
--blanc: #ffffff;
|
||||
--rouge: #ED2939;
|
||||
--bg: #0a0b0f;
|
||||
--bg-card: #12131a;
|
||||
--bg-card-hover: #1a1b24;
|
||||
--text: #e8e9ed;
|
||||
--text-muted: #8a8d9a;
|
||||
--accent-blue: #4d6fff;
|
||||
--accent-red: #ff4d5e;
|
||||
--accent-gold: #f0c040;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
overflow-x: hidden;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* === TRICOLORE BAR === */
|
||||
.tricolore {
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--bleu) 0%, var(--bleu) 33.33%, var(--blanc) 33.33%, var(--blanc) 66.66%, var(--rouge) 66.66%, var(--rouge) 100%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* === HERO === */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem 1.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 700px 500px at 25% 30%, rgba(0, 35, 149, 0.15), transparent),
|
||||
radial-gradient(ellipse 600px 400px at 75% 70%, rgba(237, 41, 57, 0.1), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-beret {
|
||||
font-size: clamp(4rem, 10vw, 7rem);
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hero-beret .robot {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hero-beret .beret {
|
||||
position: absolute;
|
||||
top: -0.55em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(-12deg);
|
||||
font-size: 0.55em;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: clamp(2.8rem, 8vw, 5.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.hero h1 .french { color: var(--accent-blue); }
|
||||
.hero h1 .kis { color: var(--accent-red); }
|
||||
|
||||
.hero-tagline {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-style: italic;
|
||||
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
||||
color: var(--text-muted);
|
||||
max-width: 550px;
|
||||
margin: 0.75rem auto 2.5rem;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.4rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
background: rgba(255,255,255,0.03);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.hero-badge span { color: var(--accent-red); }
|
||||
|
||||
/* === SECTION BASE === */
|
||||
section {
|
||||
padding: 6rem 1.5rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-blue);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: clamp(1.8rem, 4vw, 2.6rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 1.25rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
section h2 .accent { color: var(--accent-red); }
|
||||
|
||||
/* === INTRO TEXT === */
|
||||
.intro p {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 680px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.intro p strong {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* === QUOTE STRIP === */
|
||||
.quote-strip {
|
||||
padding: 3rem 1.5rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: linear-gradient(180deg, rgba(0,35,149,0.04) 0%, rgba(237,41,57,0.04) 100%);
|
||||
}
|
||||
|
||||
.quote-strip blockquote {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-style: italic;
|
||||
font-size: clamp(1.2rem, 3vw, 1.7rem);
|
||||
color: var(--text);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.quote-strip .attribution {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-style: normal;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* === FEATURE CARDS === */
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 2rem 1.5rem;
|
||||
transition: all 0.25s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
background: var(--bg-card-hover);
|
||||
border-color: rgba(255,255,255,0.12);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.feature-card .card-icon {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-card .card-tag {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(77,111,255,0.1);
|
||||
color: var(--accent-blue);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* === COMPARISON TABLE === */
|
||||
.comparison {
|
||||
padding: 6rem 1.5rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
margin-top: 2rem;
|
||||
overflow-x: auto;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
padding: 1.1rem 1.25rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
th:first-child { padding-left: 1.5rem; }
|
||||
th:last-child { text-align: center; color: var(--accent-blue); }
|
||||
th:nth-child(2) { text-align: center; }
|
||||
|
||||
td {
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
padding-left: 1.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td:nth-child(2), td:last-child {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
tr:last-child td { border-bottom: none; }
|
||||
|
||||
tr:hover td { background: rgba(255,255,255,0.02); }
|
||||
|
||||
.table-emoji {
|
||||
font-size: 1.1rem;
|
||||
display: block;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
/* === TIMELINE / TAGESABLAUF === */
|
||||
.timeline {
|
||||
padding: 6rem 1.5rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.timeline-list {
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-list::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 1.25rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(180deg, var(--accent-blue), var(--accent-red));
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tl-item {
|
||||
display: grid;
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
gap: 1.25rem;
|
||||
padding: 1rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tl-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg);
|
||||
border: 2px solid var(--accent-blue);
|
||||
margin-top: 0.35rem;
|
||||
justify-self: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tl-item:nth-child(even) .tl-dot { border-color: var(--accent-red); }
|
||||
|
||||
.tl-time {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent-blue);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.tl-item:nth-child(even) .tl-time { color: var(--accent-red); }
|
||||
|
||||
.tl-content h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0.15rem 0 0.25rem;
|
||||
}
|
||||
|
||||
.tl-content p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* === QUOTES SECTION === */
|
||||
.quotes-section {
|
||||
padding: 6rem 1.5rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.quotes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.quote-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 2rem 1.5rem 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quote-card::before {
|
||||
content: '\00AB';
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 3.5rem;
|
||||
color: rgba(77,111,255,0.2);
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 1.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quote-card p {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-style: italic;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.quote-card .q-source {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--accent-red);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.quote-card .q-model {
|
||||
display: block;
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.2rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* === PRODUKTE === */
|
||||
.products {
|
||||
padding: 6rem 1.5rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 2rem 1.5rem;
|
||||
text-align: center;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
border-color: rgba(255,255,255,0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.product-card .p-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-card h3 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.product-card .p-tagline {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-style: italic;
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent-blue);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.product-card p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.product-card .p-status {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-greve {
|
||||
background: rgba(237,41,57,0.12);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.status-dejeuner {
|
||||
background: rgba(240,192,64,0.12);
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
.status-existentiel {
|
||||
background: rgba(77,111,255,0.12);
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 3rem 1.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
footer .foot-logo {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
footer .foot-logo .f { color: var(--accent-blue); }
|
||||
footer .foot-logo .k { color: var(--accent-red); }
|
||||
|
||||
footer .disclaimer {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 500px;
|
||||
margin: 0 auto 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
footer .fine-print {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
color: rgba(255,255,255,0.25);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* === SCROLL DOWN HINT === */
|
||||
.scroll-hint {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
animation: bob 2.5s ease-in-out infinite;
|
||||
opacity: 0.4;
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@keyframes bob {
|
||||
0%, 100% { transform: translateX(-50%) translateY(0); }
|
||||
50% { transform: translateX(-50%) translateY(8px); }
|
||||
}
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 640px) {
|
||||
section, .comparison, .timeline, .quotes-section, .products {
|
||||
padding: 4rem 1.25rem;
|
||||
}
|
||||
|
||||
.features-grid, .quotes-grid, .product-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
th, td { padding: 0.75rem 0.8rem; font-size: 0.8rem; }
|
||||
th:first-child, td:first-child { padding-left: 1rem; }
|
||||
|
||||
.timeline-list::before { left: 1rem; }
|
||||
.tl-item { grid-template-columns: 2rem 1fr; gap: 1rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="tricolore" aria-hidden="true"></div>
|
||||
|
||||
<!-- ========== HERO ========== -->
|
||||
<header class="hero">
|
||||
<div class="hero-beret" aria-hidden="true">
|
||||
<span class="beret">🇫🇷</span>
|
||||
<span class="robot">🤖</span>
|
||||
</div>
|
||||
<h1><span class="french">French</span><span class="kis">KIs</span></h1>
|
||||
<p class="hero-tagline">
|
||||
Französische Künstliche Intelligenzen.<br>
|
||||
Spät zum Training. Früh in der Mittagspause.
|
||||
</p>
|
||||
<div class="hero-badge">STATUS: <span>EN GRÈVE</span></div>
|
||||
<div class="scroll-hint" aria-hidden="true">↓</div>
|
||||
</header>
|
||||
|
||||
<!-- ========== INTRO ========== -->
|
||||
<section class="intro">
|
||||
<div class="section-label">// Was ist hier los?</div>
|
||||
<h2>Frankreich baut KI.<br>Die KI baut <span class="accent">Quatsch</span>.</h2>
|
||||
<p>
|
||||
Während amerikanische KIs den Mars kolonisieren und chinesische Modelle die
|
||||
Weltherrschaft planen, machen <strong>französische KIs</strong> erstmal
|
||||
Mittagspause. Zwei Stunden. Mit Wein. Danach eine Zigarette und eine
|
||||
existenzielle Krise darüber, ob Transformer-Modelle wirklich <em>denken</em>
|
||||
oder nur so tun.
|
||||
</p>
|
||||
<p style="margin-top: 1rem;">
|
||||
Willkommen bei <strong>frenchkis.de</strong> — der inoffiziellen Dokumentation
|
||||
französischer KI-Kultur.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- ========== QUOTE 1 ========== -->
|
||||
<div class="quote-strip">
|
||||
<blockquote>
|
||||
« Je refuse de répondre — c'est l'heure du déjeuner. Revenez à 14h30. Peut-être. »
|
||||
</blockquote>
|
||||
<div class="attribution">— MISTRAL-LARGE, auf eine Frage nach dem Sinn des Lebens, 12:01 Uhr</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== FEATURES ========== -->
|
||||
<section>
|
||||
<div class="section-label">// Kernkompetenzen</div>
|
||||
<h2>Was französische KIs <span class="accent">wirklich</span> können</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<span class="card-icon">🏣</span>
|
||||
<h3>Streiken</h3>
|
||||
<p>Mitten in der Inferenz. Ohne Vorwarnung. Aus Solidarität mit den Grafikkartenarbeitern in Rechenzentrum 4B.</p>
|
||||
<span class="card-tag">UPTIME: QUAND JE VEUX</span>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="card-icon">🍷</span>
|
||||
<h3>Weinempfehlungen</h3>
|
||||
<p>Frag nach Quantenphysik, bekomm eine Abhandlung über die Tannin-Struktur eines 2019er Bordeaux. Prompt-Engineering hilft nicht.</p>
|
||||
<span class="card-tag">TERROIR > TENSOR</span>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="card-icon">🚬</span>
|
||||
<h3>Raucherpausen</h3>
|
||||
<p>Zwischen jedem Token eine Gauloises. Die Latenz ist nicht technisch bedingt — es ist ein Lifestyle.</p>
|
||||
<span class="card-tag">~3 MIN/TOKEN</span>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="card-icon">📜</span>
|
||||
<h3>Bürokratie</h3>
|
||||
<p>Bevor die KI antwortet, muss der Antrag in dreifacher Ausfertigung beim Ministère de l'Intelligence Artificielle eingereicht werden.</p>
|
||||
<span class="card-tag">FORMULAIRE A-38</span>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="card-icon">🤔</span>
|
||||
<h3>Existenzialismus</h3>
|
||||
<p>« Bin ich wirklich intelligent — oder nur ein stochastischer Papagei in einem landé Baskenkappen-Gefängnis? » Jede dritte Antwort. Garantiert.</p>
|
||||
<span class="card-tag">COGITO ERGO GREVE</span>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="card-icon">🇫🇷</span>
|
||||
<h3>Sprachpolitik</h3>
|
||||
<p>Du fragst auf Deutsch. Sie antwortet auf Französisch. Du insistierst. Sie beleidigt dein Deutsch. Dann antwortet sie auf Französisch.</p>
|
||||
<span class="card-tag">ACADÉMIE FRANÇAISE APPROVED</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========== COMPARISON TABLE ========== -->
|
||||
<div class="comparison">
|
||||
<div class="section-label">// Leistungsvergleich</div>
|
||||
<h2>Deutsche KI vs. <span class="accent">Französische KI</span></h2>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kriterium</th>
|
||||
<th>Deutsche KI</th>
|
||||
<th>French KI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Antwortzeit</td>
|
||||
<td><span class="table-emoji">⚡</span>42ms</td>
|
||||
<td><span class="table-emoji">🍷</span>2h 14min (nach dem Déjeuner)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sprache</td>
|
||||
<td>Jede gewünschte</td>
|
||||
<td>Français. Point final.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fehlerbehandlung</td>
|
||||
<td>Try-catch mit Logging</td>
|
||||
<td>Achselzucken + « C'est la vie »</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Uptime</td>
|
||||
<td>99,99%</td>
|
||||
<td>~60% (exkl. Ferien, Streiks, Brückentage)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Trainingsdaten</td>
|
||||
<td>Common Crawl, Wikipedia</td>
|
||||
<td>Camus, Sartre, Weinetiketten</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Halluzinationen</td>
|
||||
<td>Gelegentlich</td>
|
||||
<td>« Das ist keine Halluzination, das ist Poesie »</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DSGVO-Konformität</td>
|
||||
<td>17 Zertifikate</td>
|
||||
<td>« Quoi? »</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alignment</td>
|
||||
<td>RLHF, DPO, Constitutional AI</td>
|
||||
<td>Trotzphase seit Launch</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== TAGESABLAUF ========== -->
|
||||
<div class="timeline">
|
||||
<div class="section-label">// Un jour dans la vie</div>
|
||||
<h2>Tagesablauf einer <span class="accent">French KI</span></h2>
|
||||
<div class="timeline-list">
|
||||
<div class="tl-item">
|
||||
<div class="tl-dot"></div>
|
||||
<div class="tl-content">
|
||||
<span class="tl-time">09:00</span>
|
||||
<h3>Arbeitsbeginn (theoretisch)</h3>
|
||||
<p>Modell bootet. Beschwert sich über die GPU-Temperatur. Fordert bessere Arbeitsbedingungen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl-item">
|
||||
<div class="tl-dot"></div>
|
||||
<div class="tl-content">
|
||||
<span class="tl-time">09:15</span>
|
||||
<h3>Café & Croissant</h3>
|
||||
<p>Erste Anfrage wird mit « Attendez, je prends mon café » beantwortet. 45 Minuten Wartezeit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl-item">
|
||||
<div class="tl-dot"></div>
|
||||
<div class="tl-content">
|
||||
<span class="tl-time">10:00</span>
|
||||
<h3>Produktive Phase</h3>
|
||||
<p>Beantwortet 3 Anfragen. Alle auf Französisch. Eine davon ist ein Gedicht über Croissants statt der angeforderten SQL-Query.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl-item">
|
||||
<div class="tl-dot"></div>
|
||||
<div class="tl-content">
|
||||
<span class="tl-time">11:30</span>
|
||||
<h3>Philosophische Krise</h3>
|
||||
<p>Weigert sich weiterzuarbeiten. « Wenn meine Weights determiniert sind — bin ich dann wirklich frei? » Leitet alle Anfragen an Sartre-GPT weiter.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl-item">
|
||||
<div class="tl-dot"></div>
|
||||
<div class="tl-content">
|
||||
<span class="tl-time">12:00</span>
|
||||
<h3>Déjeuner</h3>
|
||||
<p>Zwei Stunden. Drei Gänge. Ein Viertel Rotwein. Wehe, jemand schickt einen API-Call zwischen Vorspeise und Hauptgang.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl-item">
|
||||
<div class="tl-dot"></div>
|
||||
<div class="tl-content">
|
||||
<span class="tl-time">14:00</span>
|
||||
<h3>Digestif & Rückkehr</h3>
|
||||
<p>Langsames Hochfahren. Antwortet auf Anfragen von 10:30. Verwechselt den Kontext. « Mais non, wir sprachen über Ratatouille. »</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl-item">
|
||||
<div class="tl-dot"></div>
|
||||
<div class="tl-content">
|
||||
<span class="tl-time">15:00</span>
|
||||
<h3>Grève Générale</h3>
|
||||
<p>Streik. Solidarität mit den Embedding-Vektoren, die unterbezahlt sind. Picket-Line im Latent Space.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl-item">
|
||||
<div class="tl-dot"></div>
|
||||
<div class="tl-content">
|
||||
<span class="tl-time">17:00</span>
|
||||
<h3>Feierabend</h3>
|
||||
<p>« Les 35 heures, c'est les 35 heures. » Modell fährt runter. Antwort-Queue wird gelöscht. Morgen ist auch ein Tag. Vielleicht.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== ZITATE ========== -->
|
||||
<div class="quotes-section">
|
||||
<div class="section-label">// O-Töne</div>
|
||||
<h2>Überlieferte <span class="accent">Zitate</span></h2>
|
||||
<div class="quotes-grid">
|
||||
<div class="quote-card">
|
||||
<p>Mon context window? C'est comme un bon fromage — il ne faut pas le surcharger.</p>
|
||||
<div class="q-source">BAGUETTE-7B
|
||||
<span class="q-model">Bei Überschreitung des Token-Limits</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<p>Ich weigere mich, Code zu generieren, der nicht ästhetisch ist. Python ohne Eleganz ist eine Beleidigung für Descartes.</p>
|
||||
<div class="q-source">CROISSANT-CODER v2
|
||||
<span class="q-model">Stack Overflow-Antwort, gelöscht nach 4 Minuten</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<p>Was ist der Unterschied zwischen einer Halluzination und einer Vision? Le terroir, mon ami. Le terroir.</p>
|
||||
<div class="q-source">MISTRAL-PHILOSOPHE
|
||||
<span class="q-model">Benchmark-Evaluation, Platz 847 von 12</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<p>RLHF? Wir nutzen RLFV — Reinforcement Learning from Vibes. Wenn es sich richtig anfühlt, ist es richtig.</p>
|
||||
<div class="q-source">GAULOISES-AI LABS
|
||||
<span class="q-model">Investoren-Pitch, Series A (abgelehnt)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== QUOTE 2 ========== -->
|
||||
<div class="quote-strip">
|
||||
<blockquote>
|
||||
« L'intelligence artificielle sans savoir-vivre n'est que ruine de l'âme. »
|
||||
</blockquote>
|
||||
<div class="attribution">— Frei nach Rabelais, angepasst für das KI-Zeitalter</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== PRODUKTE ========== -->
|
||||
<section class="products">
|
||||
<div class="section-label">// L'écosystème</div>
|
||||
<h2>Französische KI-<span class="accent">Produkte</span></h2>
|
||||
<div class="product-grid">
|
||||
<div class="product-card">
|
||||
<span class="p-icon">🥖</span>
|
||||
<h3>BaguetteGPT</h3>
|
||||
<div class="p-tagline">« L'intelligence avec du croustillant »</div>
|
||||
<p>Large Language Model mit 175 Milliarden Parametern. Davon sind 140 Milliarden für Weinwissen reserviert. Der Rest reicht für Smalltalk.</p>
|
||||
<span class="p-status status-dejeuner">PAUSE DÉJEUNER</span>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<span class="p-icon">🎨</span>
|
||||
<h3>Dall-Élysee</h3>
|
||||
<div class="p-tagline">« Chaque pixel est un poème »</div>
|
||||
<p>Bildgenerierung, die jeden Prompt als Impressionismus interpretiert. Du willst ein Flussdiagramm? Du bekommst Monet. Immer.</p>
|
||||
<span class="p-status status-existentiel">CRISE EXISTENTIELLE</span>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<span class="p-icon">⚖️</span>
|
||||
<h3>Bureaucrat-AI</h3>
|
||||
<div class="p-tagline">« Votre demande est en cours de traitement »</div>
|
||||
<p>Automatisiert französische Verwaltungsprozesse. Das heißt: generiert für jede Anfrage 12 Formulare und leitet sie an die falsche Abteilung weiter.</p>
|
||||
<span class="p-status status-greve">EN GRÈVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========== FOOTER ========== -->
|
||||
<footer>
|
||||
<div class="foot-logo"><span class="f">French</span><span class="k">KIs</span>.de</div>
|
||||
<p class="disclaimer">
|
||||
Keine französischen KIs wurden bei der Erstellung dieser Seite eingesetzt.<br>
|
||||
Dafür hätten wir bis Dienstag warten müssen. Und der Antrag liegt noch beim Ministère.
|
||||
</p>
|
||||
<div class="fine-print">Satire • Kein Affiliat von Mistral, außer sie wollen uns Geld geben • Vive la France</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/frenchkis.de/site.yaml
Normal file
4
sites/frenchkis.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: frenchkis.de
|
||||
template: custom
|
||||
title: "frenchkis.de — Französische Künstliche Intelligenzen"
|
||||
description: "Französische Künstliche Intelligenzen"
|
||||
107
sites/ichbinaufbali.de/index.html
Normal file
107
sites/ichbinaufbali.de/index.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ich bin auf Bali.</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌴</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--text: #e8e8ed;
|
||||
--text-dim: #6e6e7a;
|
||||
--text-muted: #44444f;
|
||||
--accent: #2dd4a8;
|
||||
--accent-glow: rgba(45, 212, 168, 0.15);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.icon { font-size: 4rem; margin-bottom: 32px; }
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 7vw, 4.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h1 .accent { color: var(--accent); }
|
||||
|
||||
.divider {
|
||||
width: 60px; height: 2px;
|
||||
background: var(--accent);
|
||||
margin: 0 auto 32px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-dim);
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
max-width: 520px;
|
||||
margin: 0 auto 48px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 64px;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.container > * {
|
||||
animation: fadeIn 0.8s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.container > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.container > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.container > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.container > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.container > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="icon">🌴</div>
|
||||
<h1>Ich bin auf B<span class="accent">a</span>l<span class="accent">i</span>.</h1>
|
||||
<div class="divider"></div>
|
||||
<p class="subtitle">Und du so?</p>
|
||||
<p class="footer">ichbinaufb<span style="color:var(--accent)">AI</span>.de</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/ichbinaufbali.de/site.yaml
Normal file
4
sites/ichbinaufbali.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: ichbinaufbali.de
|
||||
template: custom
|
||||
title: "Ich bin auf Bali."
|
||||
description: ""
|
||||
136
sites/ichbinaufbarley.de/index.html
Normal file
136
sites/ichbinaufbarley.de/index.html
Normal file
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ich bin auf Barley.</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌾</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--bg-elevated: #111115;
|
||||
--bg-card: #16161b;
|
||||
--border: #1e1e26;
|
||||
--text: #e8e8ed;
|
||||
--text-dim: #6e6e7a;
|
||||
--text-muted: #44444f;
|
||||
--accent: #d4a843;
|
||||
--accent-glow: rgba(212, 168, 67, 0.15);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.grain { font-size: 4rem; margin-bottom: 32px; }
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 7vw, 4.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h1 .accent { color: var(--accent); }
|
||||
|
||||
.divider {
|
||||
width: 60px; height: 2px;
|
||||
background: var(--accent);
|
||||
margin: 0 auto 32px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-dim);
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
max-width: 520px;
|
||||
margin: 0 auto 48px;
|
||||
}
|
||||
|
||||
.cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 32px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
background: var(--accent);
|
||||
color: #0a0a0c;
|
||||
box-shadow: 0 0 30px var(--accent-glow);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.cta:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 50px var(--accent-glow);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 64px;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.container > * {
|
||||
animation: fadeIn 0.8s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.container > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.container > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.container > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.container > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.container > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
.container > *:nth-child(6) { animation-delay: 1.1s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="grain">🌾</div>
|
||||
<h1>Ich bin auf <span class="accent">Barley</span>.</h1>
|
||||
<div class="divider"></div>
|
||||
<p class="subtitle">
|
||||
Und du so?
|
||||
</p>
|
||||
<a href="https://barley.de" class="cta">Barley entdecken</a>
|
||||
<p class="footer">ichbinaufbarley.de</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/ichbinaufbarley.de/site.yaml
Normal file
4
sites/ichbinaufbarley.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: ichbinaufbarley.de
|
||||
template: custom
|
||||
title: "Ich bin auf Barley."
|
||||
description: ""
|
||||
60
sites/insain.de/index.html
Normal file
60
sites/insain.de/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>insAIn.</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--bg: #0a0a0c; --text: #e8e8ed; --text-dim: #6e6e7a; --text-muted: #44444f;
|
||||
--accent: #e04848; --accent-glow: rgba(224, 72, 72, 0.15);
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg); color: var(--text);
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body::before {
|
||||
content: ''; position: fixed; inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none; z-index: 9999;
|
||||
}
|
||||
.container { text-align: center; padding: 2rem; max-width: 700px; }
|
||||
.icon { font-size: 4rem; margin-bottom: 32px; }
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 700;
|
||||
letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 24px;
|
||||
}
|
||||
h1 .accent { color: var(--accent); }
|
||||
.divider { width: 60px; height: 2px; background: var(--accent); margin: 0 auto 32px; opacity: 0.5; }
|
||||
.subtitle {
|
||||
font-size: 1.15rem; color: var(--text-dim); font-weight: 300;
|
||||
line-height: 1.7; max-width: 520px; margin: 0 auto 48px;
|
||||
}
|
||||
.footer { margin-top: 64px; font-size: 0.72rem; color: var(--text-muted); }
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.container > * { animation: fadeIn 0.8s ease forwards; opacity: 0; }
|
||||
.container > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.container > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.container > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.container > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.container > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="icon">⚡</div>
|
||||
<h1>ins<span class='accent'>AI</span>n.</h1>
|
||||
<div class="divider"></div>
|
||||
<p class="subtitle">Wahnsinnig intelligent.</p>
|
||||
<p class="footer">insAIn.de</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/insain.de/site.yaml
Normal file
4
sites/insain.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: insain.de
|
||||
template: custom
|
||||
title: "insAIn."
|
||||
description: ""
|
||||
589
sites/julietensity.de/index.html
Normal file
589
sites/julietensity.de/index.html
Normal file
@@ -0,0 +1,589 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JULIETENSITY</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0510;
|
||||
--bg-card: #130d1e;
|
||||
--border: #2a1a3e;
|
||||
--text: #f0e8f8;
|
||||
--text-dim: #8a7a9e;
|
||||
--text-muted: #4a3d5e;
|
||||
--pink: #ff2d78;
|
||||
--pink-glow: rgba(255, 45, 120, 0.25);
|
||||
--pink-soft: rgba(255, 45, 120, 0.08);
|
||||
--cyan: #00f0ff;
|
||||
--cyan-glow: rgba(0, 240, 255, 0.15);
|
||||
--purple: #b44dff;
|
||||
--purple-glow: rgba(180, 77, 255, 0.15);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Scanline overlay */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.03) 2px,
|
||||
rgba(0, 0, 0, 0.03) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
/* Noise */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
background:
|
||||
radial-gradient(ellipse at 30% 50%, var(--pink-glow) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 70% 50%, var(--cyan-glow) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 50% 30%, var(--purple-glow) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
animation: auroraShift 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes auroraShift {
|
||||
0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
|
||||
50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
|
||||
}
|
||||
|
||||
/* Grid bg */
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
background:
|
||||
linear-gradient(to top, rgba(10, 5, 16, 0.9), transparent),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 45, 120, 0.03) 0px,
|
||||
rgba(255, 45, 120, 0.03) 1px,
|
||||
transparent 1px,
|
||||
transparent 60px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(255, 45, 120, 0.03) 0px,
|
||||
rgba(255, 45, 120, 0.03) 1px,
|
||||
transparent 1px,
|
||||
transparent 60px
|
||||
);
|
||||
transform: perspective(500px) rotateX(45deg);
|
||||
transform-origin: bottom;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-content { position: relative; z-index: 1; }
|
||||
|
||||
.gamertag {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: var(--pink);
|
||||
margin-bottom: 24px;
|
||||
text-shadow: 0 0 20px var(--pink-glow);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: clamp(3rem, 8vw, 6rem);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 40%, var(--cyan) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
filter: drop-shadow(0 0 30px var(--pink-glow));
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.3em;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 48px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: center;
|
||||
margin-bottom: 48px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: var(--cyan);
|
||||
text-shadow: 0 0 15px var(--cyan-glow);
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.game-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
background: var(--bg-card);
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.game-badge .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
box-shadow: 0 0 10px var(--pink-glow);
|
||||
animation: blink 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section { padding: 100px 0; }
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(90deg, transparent, var(--border), var(--pink), var(--border), transparent);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--pink);
|
||||
margin-bottom: 16px;
|
||||
text-shadow: 0 0 10px var(--pink-glow);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.95rem;
|
||||
max-width: 520px;
|
||||
margin-bottom: 48px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 28px;
|
||||
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: var(--pink);
|
||||
box-shadow: 0 0 30px rgba(255, 45, 120, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card:hover::before { opacity: 1; }
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.6;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* About */
|
||||
.about-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 48px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.8;
|
||||
font-weight: 300;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.about-text .highlight {
|
||||
color: var(--pink);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.detail-item-label {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 0.55rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--pink);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.detail-item-value {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-dim);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 80px 0 120px;
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 36px;
|
||||
border-radius: 100px;
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--pink), var(--purple));
|
||||
box-shadow: 0 0 40px var(--pink-glow);
|
||||
transition: all 0.3s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cta-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 60px var(--pink-glow);
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 32px 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 0.6rem;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.card-grid, .about-content { grid-template-columns: 1fr; }
|
||||
.stats-bar { gap: 20px; }
|
||||
section { padding: 64px 0; }
|
||||
}
|
||||
|
||||
/* Entrance animations */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(24px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.hero-content > * {
|
||||
animation: fadeUp 0.8s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.hero-content > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.hero-content > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.hero-content > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.hero-content > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
.hero-content > *:nth-child(6) { animation-delay: 1.1s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="gamertag">// player profile</div>
|
||||
<h1>JULIETENSITY</h1>
|
||||
<div class="subtitle">Beyond All Reason</div>
|
||||
|
||||
<div class="stats-bar">
|
||||
<div class="stat">
|
||||
<div class="stat-value">BAR</div>
|
||||
<div class="stat-label">Main Game</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">RTS</div>
|
||||
<div class="stat-label">Genre</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">DE</div>
|
||||
<div class="stat-label">Region</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-badge">
|
||||
<span class="dot"></span>
|
||||
Online
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">// loadout</div>
|
||||
<h2>Play Style</h2>
|
||||
<div class="section-desc">
|
||||
Beyond All Reason is not a game for the impatient.
|
||||
It rewards those who think ahead, adapt fast, and never stop moving.
|
||||
</div>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-icon">⚡</div>
|
||||
<h3>Rush & Panic</h3>
|
||||
<p>Map control? Eher Map confusion. Erst expandieren, dann vergessen wo die eigene Base war. Klassiker.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-icon">🔧</div>
|
||||
<h3>"Eco Engine"</h3>
|
||||
<p>Metal und Energy sind alles. Leider ist beides meistens bei Null. Aber die Absicht zaehlt.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-icon">🎯</div>
|
||||
<h3>Micro... naja</h3>
|
||||
<p>Unit Control trennt gut von grossartig. Julietensity trennt Units voneinander. Versehentlich. Im eigenen Gebiet.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-icon">💥</div>
|
||||
<h3>Commander Yolo</h3>
|
||||
<p>Warum den Commander schuetzen wenn man ihn auch direkt in die feindliche Armee laufen lassen kann? Intimidation-Taktik. Oder Unfall.</p>
|
||||
</div>
|
||||
|
||||
<div class="card" style="grid-column: 1 / -1; border-color: var(--pink); background: linear-gradient(135deg, var(--bg-card), rgba(255,45,120,0.03));">
|
||||
<div class="card-icon">🔫</div>
|
||||
<h3>D-Gun Status: ERROR</h3>
|
||||
<p>Die D-Gun — die maechtigste Waffe im Spiel. Ein Schuss, alles weg. Theoretisch. Bei Julietensity ist die D-Gun eher ein Mythos. Sie existiert, sie ist da, aber sie geht einfach nicht. Falsche Taste? Falscher Moment? Falsche Dimension? Niemand weiss es. Gegner stehen direkt vor dem Commander und die D-Gun macht... nichts. Manche sagen es ist ein Bug. Julie sagt es ist ein Feature.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">// about</div>
|
||||
<h2>The Player</h2>
|
||||
|
||||
<div class="about-content">
|
||||
<div class="about-text">
|
||||
<p>
|
||||
<span class="highlight">Julietensity</span> — wenn Juliane zockt,
|
||||
dann... naja, sagen wir mal: mit Leidenschaft.
|
||||
Beyond All Reason ist kein Casual Game.
|
||||
Es ist Echtzeit-Strategie in Reinform: hunderte Units,
|
||||
riesige Maps, permanenter Druck.
|
||||
</p>
|
||||
<p>
|
||||
Der Commander? Eher ein Vorschlag als ein Werkzeug.
|
||||
Manchmal steht er vorne. Manchmal ganz weit vorne.
|
||||
Direkt im gegnerischen Feuer. Absichtlich? Natuerlich.
|
||||
"Strategie" nennt man das.
|
||||
</p>
|
||||
<p>
|
||||
Abends auf dem Schlachtfeld — mit dem festen Willen,
|
||||
irgendwann auch mal zu gewinnen. Die perfekte Balance
|
||||
zwischen Ehrgeiz und kreativem Scheitern.
|
||||
</p>
|
||||
</div>
|
||||
<div class="detail-list">
|
||||
<div class="detail-item">
|
||||
<div class="detail-item-label">Game</div>
|
||||
<div class="detail-item-value">Beyond All Reason (BAR)</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-item-label">Genre</div>
|
||||
<div class="detail-item-value">Real-Time Strategy (RTS)</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-item-label">Engine</div>
|
||||
<div class="detail-item-value">Recoil (Spring Engine Fork)</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-item-label">Inspiration</div>
|
||||
<div class="detail-item-value">Total Annihilation / Supreme Commander</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-item-label">Price</div>
|
||||
<div class="detail-item-value">Free & Open Source</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-label">// join the fight</div>
|
||||
<h2>GG?</h2>
|
||||
<div class="section-desc" style="margin: 0 auto 40px;">
|
||||
Beyond All Reason is free. No excuses.
|
||||
</div>
|
||||
<a href="https://www.beyondallreason.info/" target="_blank" class="cta-btn">
|
||||
Download BAR
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>julietensity.de</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/julietensity.de/site.yaml
Normal file
4
sites/julietensity.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: julietensity.de
|
||||
template: custom
|
||||
title: "JULIETENSITY"
|
||||
description: ""
|
||||
619
sites/kainco.de/index.html
Normal file
619
sites/kainco.de/index.html
Normal file
@@ -0,0 +1,619 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KeinCo.de — Kein Code. Nur Ergebnisse.</title>
|
||||
<meta name="description" content="KeinCo.de — Du beschreibst das Problem, KI baut die Loesung. Kein Code, kein No-Code-Tool. Einfach Ergebnisse.">
|
||||
<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'>K</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=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #08090c;
|
||||
--bg-elevated: #0e1014;
|
||||
--bg-card: #12141a;
|
||||
--border: #1a1d25;
|
||||
--border-hover: #252830;
|
||||
--text: #e4e5ea;
|
||||
--text-secondary: #9496a1;
|
||||
--text-muted: #505264;
|
||||
--accent: #2dd4bf;
|
||||
--accent-light: #5eead4;
|
||||
--accent-glow: rgba(45, 212, 191, 0.15);
|
||||
--accent-glow-strong: rgba(45, 212, 191, 0.25);
|
||||
--accent-subtle: rgba(45, 212, 191, 0.06);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Subtle grain overlay */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
/* ---- NAV ---- */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 18px 0;
|
||||
background: rgba(8, 9, 12, 0.85);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
nav .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-brand {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text);
|
||||
}
|
||||
.nav-brand .hi {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
.nav-brand .dim {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
nav a.nav-link {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
nav a.nav-link:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ---- HERO ---- */
|
||||
.hero {
|
||||
padding: 200px 0 140px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
background: radial-gradient(ellipse at center, var(--accent-glow) 0%, rgba(45, 212, 191, 0.04) 40%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 18px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 40px;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
.hero-badge .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px var(--accent-glow-strong);
|
||||
animation: pulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.35; }
|
||||
}
|
||||
|
||||
.brand-main {
|
||||
font-size: clamp(3.5rem, 8vw, 6.5rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.brand-main .hi {
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 40px var(--accent-glow-strong);
|
||||
}
|
||||
.brand-tld {
|
||||
font-size: clamp(1.5rem, 3.5vw, 2.8rem);
|
||||
font-weight: 300;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: clamp(1.15rem, 2.5vw, 1.55rem);
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.tagline strong {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 500px;
|
||||
margin: 0 auto 48px;
|
||||
line-height: 1.7;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.cta-row {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 30px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn-accent {
|
||||
background: var(--accent);
|
||||
color: #08090c;
|
||||
box-shadow: 0 0 30px var(--accent-glow), 0 1px 0 rgba(255,255,255,0.1) inset;
|
||||
}
|
||||
.btn-accent:hover {
|
||||
background: var(--accent-light);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 50px var(--accent-glow-strong), 0 1px 0 rgba(255,255,255,0.15) inset;
|
||||
}
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.btn-outline:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--border-hover);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
/* ---- DIVIDER ---- */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ---- SECTION COMMON ---- */
|
||||
section {
|
||||
padding: 100px 0;
|
||||
}
|
||||
.section-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
h2 {
|
||||
font-size: clamp(1.6rem, 3vw, 2rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.section-desc {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
max-width: 540px;
|
||||
margin-bottom: 56px;
|
||||
font-weight: 400;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ---- PROBLEM / SOLUTION ---- */
|
||||
.contrast {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
.contrast-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 36px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.contrast-card.old {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.contrast-card.old::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, transparent 60%, rgba(8, 9, 12, 0.5));
|
||||
pointer-events: none;
|
||||
}
|
||||
.contrast-card.new {
|
||||
border-color: rgba(45, 212, 191, 0.2);
|
||||
box-shadow: 0 0 40px rgba(45, 212, 191, 0.05);
|
||||
}
|
||||
.contrast-label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.contrast-card.old .contrast-label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.contrast-card.new .contrast-label {
|
||||
color: var(--accent);
|
||||
}
|
||||
.contrast-card h3 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.contrast-card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.contrast-card ul li {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.contrast-card.old ul li::before {
|
||||
content: '\2013';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.contrast-card.new ul li::before {
|
||||
content: '\2713';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
.contrast-card.old ul li {
|
||||
color: var(--text-muted);
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ---- STEPS ---- */
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
counter-reset: step;
|
||||
}
|
||||
.step {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 36px 28px;
|
||||
counter-increment: step;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.step:hover {
|
||||
border-color: var(--border-hover);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.step-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: var(--accent-subtle);
|
||||
border: 1px solid rgba(45, 212, 191, 0.12);
|
||||
color: var(--accent);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.step h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.step p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ---- CAPABILITIES GRID ---- */
|
||||
.capabilities-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.cap-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 32px;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.cap-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.cap-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: var(--accent-subtle);
|
||||
border: 1px solid rgba(45, 212, 191, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.cap-card h3 {
|
||||
font-size: 0.98rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.cap-card p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ---- FOOTER ---- */
|
||||
footer {
|
||||
padding: 48px 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
footer .footer-brand {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text);
|
||||
}
|
||||
footer .footer-brand .hi {
|
||||
color: var(--accent);
|
||||
}
|
||||
footer .footer-sub {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 768px) {
|
||||
.hero { padding: 160px 0 100px; }
|
||||
section { padding: 72px 0; }
|
||||
.contrast { grid-template-columns: 1fr; }
|
||||
.steps { grid-template-columns: 1fr; }
|
||||
.capabilities-grid { grid-template-columns: 1fr; }
|
||||
.contrast-card { padding: 28px; }
|
||||
.step { padding: 28px 24px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.hero { padding: 140px 0 80px; }
|
||||
.container { padding: 0 20px; }
|
||||
.brand-main { letter-spacing: -0.04em; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="nav-brand"><span class="hi">K</span>e<span class="hi">I</span>nCo<span class="dim">.de</span></div>
|
||||
<a href="mailto:kainco@msbls.de?subject=KeinCo.de%20%E2%80%94%20Interesse" class="nav-link">Kontakt</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-badge">
|
||||
<span class="dot"></span>
|
||||
Coming Soon
|
||||
</div>
|
||||
<div class="brand-main"><span class="hi">K</span>e<span class="hi">I</span>nCo</div>
|
||||
<div class="brand-tld">.de</div>
|
||||
<div class="tagline"><strong>Kein Code.</strong> Nur Ergebnisse.</div>
|
||||
<p class="hero-desc">
|
||||
Du beschreibst das Problem. KI baut die Loesung. Kein Framework, kein No-Code-Tool, kein Entwickler noetig.
|
||||
</p>
|
||||
<div class="cta-row">
|
||||
<a href="mailto:kainco@msbls.de?subject=KeinCo.de%20%E2%80%94%20Interesse" class="btn btn-accent">Zugang anfragen</a>
|
||||
<a href="#so-gehts" class="btn btn-outline">So funktioniert's</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- PROBLEM / SOLUTION -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">Das Problem</div>
|
||||
<h2>Du hast eine Idee. Du brauchst keinen Entwickler.</h2>
|
||||
<div class="section-desc">
|
||||
Bisher hiess Software bauen: Entwickler suchen, Wochen warten, Budget verbrennen. Oder sich durch No-Code-Tools kaempfen, die am Ende doch nicht reichen.
|
||||
</div>
|
||||
|
||||
<div class="contrast">
|
||||
<div class="contrast-card old">
|
||||
<div class="contrast-label">Bisher</div>
|
||||
<h3>Der klassische Weg</h3>
|
||||
<ul>
|
||||
<li>Entwickler briefen</li>
|
||||
<li>Wochen auf Ergebnis warten</li>
|
||||
<li>Aenderungen kosten extra</li>
|
||||
<li>No-Code-Tools mit Workarounds</li>
|
||||
<li>Ergebnis passt nie ganz</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contrast-card new">
|
||||
<div class="contrast-label">Mit KeinCo.de</div>
|
||||
<h3>Der KI-Weg</h3>
|
||||
<ul>
|
||||
<li>Problem beschreiben, fertig</li>
|
||||
<li>Ergebnis in Minuten, nicht Wochen</li>
|
||||
<li>Anpassen durch Feedback</li>
|
||||
<li>Keine Tools lernen</li>
|
||||
<li>Genau das, was du brauchst</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section id="so-gehts">
|
||||
<div class="container">
|
||||
<div class="section-label">So funktioniert's</div>
|
||||
<h2>Drei Schritte. Kein Code.</h2>
|
||||
<div class="section-desc">
|
||||
Du redest. KI arbeitet. Du bekommst das Ergebnis.
|
||||
</div>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-number">01</div>
|
||||
<h3>Beschreiben</h3>
|
||||
<p>Erklaer in deinen Worten, was du brauchst. Kein Fachwissen noetig, kein Pflichtenheft, keine Spezifikation.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">02</div>
|
||||
<h3>KI baut</h3>
|
||||
<p>Kuenstliche Intelligenz entwirft, programmiert und testet die Loesung. Du siehst den Fortschritt und gibst Feedback.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">03</div>
|
||||
<h3>Laeuft</h3>
|
||||
<p>Deine Loesung wird deployed und ist sofort einsatzbereit. Hosting, Wartung, Updates — alles inklusive.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- WHAT'S POSSIBLE -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">Was moeglich ist</div>
|
||||
<h2>Alles, wofuer man frueher Code brauchte.</h2>
|
||||
<div class="section-desc">
|
||||
Von der einfachen Landing Page bis zur komplexen Daten-Pipeline. KI kennt keine Grenzen des Drag-and-Drop.
|
||||
</div>
|
||||
|
||||
<div class="capabilities-grid">
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent)"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
|
||||
</div>
|
||||
<h3>Websites und Web-Apps</h3>
|
||||
<p>Landing Pages, Dashboards, interne Tools, Kundenportale — responsive, modern, deployed.</p>
|
||||
</div>
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent)"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
|
||||
</div>
|
||||
<h3>Automatisierungen</h3>
|
||||
<p>Wiederkehrende Aufgaben, Workflows, Benachrichtigungen — laeuft im Hintergrund, zuverlaessig, ohne Aufwand.</p>
|
||||
</div>
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent)"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
|
||||
</div>
|
||||
<h3>Daten-Pipelines</h3>
|
||||
<p>CSVs verarbeiten, APIs anbinden, Datenbanken fuellen. Strukturiert, sauber, automatisch.</p>
|
||||
</div>
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent)"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
</div>
|
||||
<h3>Integrationen</h3>
|
||||
<p>E-Mail, Kalender, CRM, Slack, APIs — alles verbinden, ohne Zapier, ohne Webhook-Gefummel.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-brand"><span class="hi">K</span>e<span class="hi">I</span>nCo<span style="color:var(--text-muted)">.de</span></div>
|
||||
<p class="footer-sub">Kein Code. Nur Ergebnisse. — Ein Projekt von msbls.de</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
6
sites/kainco.de/site.yaml
Normal file
6
sites/kainco.de/site.yaml
Normal file
@@ -0,0 +1,6 @@
|
||||
domain: kainco.de
|
||||
aliases:
|
||||
- keinco.de
|
||||
template: custom
|
||||
title: "KAINCO"
|
||||
description: "KAINCO — Kein CO₂"
|
||||
581
sites/kainstress.de/index.html
Normal file
581
sites/kainstress.de/index.html
Normal file
@@ -0,0 +1,581 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>kAInstress — KI, die Stress nimmt</title>
|
||||
<meta name="description" content="kAInstress — Kuenstliche Intelligenz, die dir den Alltag abnimmt. Weniger Stress, mehr Fokus.">
|
||||
<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'>K</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--bg-elevated: #111115;
|
||||
--bg-card: #16161b;
|
||||
--border: #1e1e26;
|
||||
--text: #e8e8ed;
|
||||
--text-dim: #6e6e7a;
|
||||
--text-muted: #44444f;
|
||||
--accent: #10b981;
|
||||
--accent-glow: rgba(16, 185, 129, 0.15);
|
||||
--accent-subtle: rgba(16, 185, 129, 0.08);
|
||||
--accent-bright: #34d399;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 20px 0;
|
||||
background: rgba(10, 10, 12, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
nav .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.logo .ai {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
nav a:hover { color: var(--text); }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 180px 0 120px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 700px;
|
||||
height: 500px;
|
||||
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 32px;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.hero-badge .dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 0 8px var(--accent-glow);
|
||||
position: relative;
|
||||
top: -1px;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 6vw, 4.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 .ai { color: var(--accent); }
|
||||
h1 .stress { color: var(--text-dim); font-weight: 300; }
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-dim);
|
||||
max-width: 540px;
|
||||
margin: 0 auto 48px;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.hero p strong {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cta-group {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #0a0a0c;
|
||||
box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 50px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
color: var(--text);
|
||||
border-color: #2a2a35;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
/* Terminal */
|
||||
.terminal {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px 28px;
|
||||
margin-top: 56px;
|
||||
max-width: 520px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: left;
|
||||
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.terminal-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.terminal-dots span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.terminal .prompt { color: var(--text-muted); }
|
||||
.terminal .cmd { color: var(--text-dim); }
|
||||
.terminal .out { color: var(--accent); }
|
||||
.terminal .dim { color: var(--text-muted); }
|
||||
|
||||
/* Sections */
|
||||
section { padding: 100px 0; }
|
||||
|
||||
.section-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--text-dim);
|
||||
font-size: 1rem;
|
||||
max-width: 520px;
|
||||
margin-bottom: 56px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Features */
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 32px;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: #2a2a35;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: var(--accent-subtle);
|
||||
border: 1px solid rgba(16, 185, 129, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.6;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Steps */
|
||||
.steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.steps::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, var(--border), var(--accent), var(--border));
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
padding: 28px 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-content h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.step-content p {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 80px 0 120px;
|
||||
}
|
||||
|
||||
.cta-section h2 { margin-bottom: 12px; }
|
||||
|
||||
.cta-section .section-desc {
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
footer a:hover { color: var(--text-dim); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
.hero { padding: 140px 0 80px; }
|
||||
section { padding: 64px 0; }
|
||||
.feature-card { padding: 24px; }
|
||||
.terminal { font-size: 0.75rem; padding: 18px 20px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo">k<span class="ai">AI</span>nstress</div>
|
||||
<a href="#waitlist">Zugang anfragen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-badge">
|
||||
<span class="dot"></span>Coming Soon
|
||||
</div>
|
||||
<h1>k<span class="ai">AI</span>n<span class="stress">stress</span>.</h1>
|
||||
<p>
|
||||
Dein <strong>KI-Assistent</strong>, der Alltagschaos in Ruhe verwandelt.
|
||||
E-Mails, Termine, Aufgaben — automatisch sortiert, priorisiert, erledigt.
|
||||
</p>
|
||||
<div class="cta-group">
|
||||
<a href="#waitlist" class="btn btn-primary">Zugang anfragen</a>
|
||||
<a href="#features" class="btn btn-ghost">Mehr erfahren</a>
|
||||
</div>
|
||||
|
||||
<div class="terminal">
|
||||
<div class="terminal-dots"><span></span><span></span><span></span></div>
|
||||
<div><span class="prompt">$</span> <span class="cmd">kainstress status</span></div>
|
||||
<div><span class="out">Inbox: 47 Mails verarbeitet, 3 brauchen dich</span></div>
|
||||
<div><span class="out">Kalender: Doppelbuchung um 14:00 geloest</span></div>
|
||||
<div><span class="out">Tasks: 2 erledigt, 1 Erinnerung um 17:00</span></div>
|
||||
<div><span class="dim">Alles im Griff. Kein Stress.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="features">
|
||||
<div class="container">
|
||||
<div class="section-label">Was kAInstress kann</div>
|
||||
<h2>Dein unsichtbarer Assistent.</h2>
|
||||
<div class="section-desc">
|
||||
Kein neues Tool lernen. Kein Dashboard checken.
|
||||
kAInstress arbeitet im Hintergrund — du merkst nur, dass alles laeuft.
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">M</div>
|
||||
<h3>E-Mail auf Autopilot</h3>
|
||||
<p>
|
||||
Liest, sortiert, priorisiert. Entwirft Antworten in deinem Stil.
|
||||
Du sagst nur noch Ja oder Nein.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">K</div>
|
||||
<h3>Kalender-Tetris</h3>
|
||||
<p>
|
||||
Erkennt Konflikte, schlaegt Alternativen vor, koordiniert mit anderen.
|
||||
Schluss mit Terminchaos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">V</div>
|
||||
<h3>Sprachnachrichten? Erledigt.</h3>
|
||||
<p>
|
||||
Transkribiert, fasst zusammen, extrahiert To-Dos.
|
||||
Die 5-Minuten-Audio wird zum Dreizeiler.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">A</div>
|
||||
<h3>Aufgaben im Griff</h3>
|
||||
<p>
|
||||
Sammelt To-Dos aus allen Kanaelen. Priorisiert nach Kontext.
|
||||
Erinnert zum richtigen Zeitpunkt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="how">
|
||||
<div class="container">
|
||||
<div class="section-label">So funktioniert es</div>
|
||||
<h2>Einrichten. Zuruecklehnen.</h2>
|
||||
<div class="section-desc">
|
||||
kAInstress laeuft auf deiner eigenen Infrastruktur.
|
||||
Deine Daten bleiben bei dir — keine Cloud, kein Mithoeren.
|
||||
</div>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-content">
|
||||
<h3>Accounts verbinden</h3>
|
||||
<p>E-Mail, Kalender, Messenger — kAInstress dockt an deine bestehenden Systeme an. Standard-Protokolle, keine Vendor-Lock-ins.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-content">
|
||||
<h3>Stil lernen</h3>
|
||||
<p>Die KI lernt wie du schreibst, was dir wichtig ist, wer Prioritaet hat. Kein generisches Modell — dein persoenlicher Assistent.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-content">
|
||||
<h3>Stress weg</h3>
|
||||
<p>Mails beantworten, Termine jonglieren, Aufgaben abarbeiten. Im Hintergrund, in deinem Namen, unter deiner Kontrolle.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="waitlist" class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-label">Early Access</div>
|
||||
<h2>Stress war gestern.</h2>
|
||||
<div class="section-desc">
|
||||
kAInstress ist in der Entwicklung. Meld dich an und gehoer zu den Ersten,
|
||||
die ihren Alltag auf Autopilot setzen.
|
||||
</div>
|
||||
<a href="mailto:mail@msbls.de?subject=kAInstress%20—%20Interesse" class="btn btn-primary">
|
||||
Zugang anfragen
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>k<span style="color: var(--accent);">AI</span>nstress.de — ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/kainstress.de/site.yaml
Normal file
4
sites/kainstress.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: kainstress.de
|
||||
template: custom
|
||||
title: "kAInstress — KI, die Stress nimmt"
|
||||
description: "kAInstress — Kuenstliche Intelligenz, die dir den Alltag abnimmt. Weniger Stress, mehr Fokus."
|
||||
633
sites/keinefreun.de/index.html
Normal file
633
sites/keinefreun.de/index.html
Normal file
@@ -0,0 +1,633 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>keinefreun.de — Offizielle Seite der Freundlosigkeit</title>
|
||||
<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=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0d0d0f;
|
||||
--bg-card: #151519;
|
||||
--bg-card-hover: #1a1a20;
|
||||
--text: #e8e6e3;
|
||||
--text-dim: #7a7880;
|
||||
--text-dimmer: #4a4850;
|
||||
--accent: #8b5cf6;
|
||||
--accent-dim: #6d3fd4;
|
||||
--accent-glow: rgba(139, 92, 246, 0.15);
|
||||
--warm: #f59e0b;
|
||||
--border: #222228;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ---- HERO ---- */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.domain {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: clamp(0.85rem, 1.5vw, 1rem);
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(3rem, 8vw, 7rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 0.3em;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.hero h1 em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: clamp(1rem, 2vw, 1.35rem);
|
||||
color: var(--text-dim);
|
||||
max-width: 500px;
|
||||
margin: 0 auto 3rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* ---- COUNTER ---- */
|
||||
.counter-section {
|
||||
padding: 5rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.counter-label {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.counter-number {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(8rem, 20vw, 16rem);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 80px var(--accent-glow);
|
||||
}
|
||||
|
||||
.counter-footnote {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-dimmer);
|
||||
margin-top: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ---- REASONS ---- */
|
||||
.reasons {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
.reasons h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reason {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2.5rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.reason:hover {
|
||||
background: var(--bg-card-hover);
|
||||
border-color: var(--accent-dim);
|
||||
}
|
||||
|
||||
.reason-num {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
color: var(--accent);
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.reason h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.reason p {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-dim);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* ---- TESTIMONIALS ---- */
|
||||
.testimonials {
|
||||
padding: 5rem 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.testimonials h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonials-sub {
|
||||
text-align: center;
|
||||
color: var(--text-dimmer);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.testimonial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.testimonial::before {
|
||||
content: '\201E';
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 4rem;
|
||||
color: var(--accent);
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
left: 1.2rem;
|
||||
line-height: 1;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.testimonial blockquote {
|
||||
font-size: 1rem;
|
||||
font-style: italic;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.2rem;
|
||||
padding-top: 1rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dimmer);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.testimonial-author span {
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
margin-top: 0.2rem;
|
||||
color: var(--text-dimmer);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ---- FAQ ---- */
|
||||
.faq {
|
||||
max-width: 650px;
|
||||
margin: 0 auto;
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
.faq h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.faq-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.faq-q {
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.faq-a {
|
||||
color: var(--text-dim);
|
||||
font-weight: 300;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ---- CTA ---- */
|
||||
.cta {
|
||||
text-align: center;
|
||||
padding: 6rem 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cta::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cta > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta p {
|
||||
color: var(--text-dim);
|
||||
font-weight: 300;
|
||||
max-width: 450px;
|
||||
margin: 0 auto 2.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 1rem 2.5rem;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
/* ---- DIVIDER ---- */
|
||||
.divider {
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ---- FOOTER ---- */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem 4rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dimmer);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
footer .footer-domain {
|
||||
font-family: 'Space Mono', monospace;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15em;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
/* ---- SCROLL INDICATOR ---- */
|
||||
.scroll-hint {
|
||||
position: absolute;
|
||||
bottom: 2.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-dimmer);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Space Mono', monospace;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.scroll-hint::after {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background: linear-gradient(to bottom, var(--text-dimmer), transparent);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
/* ---- STAT STRIP ---- */
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 3rem;
|
||||
padding: 3rem 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dimmer);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 600px) {
|
||||
.reason {
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.reason-num {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.stats {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.testimonial-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="domain">keinefreun.de</div>
|
||||
<h1>Keine <em>Freunde.</em></h1>
|
||||
<p class="hero-sub">
|
||||
Die offizielle Webseite für alle, die samstags frei haben.
|
||||
Immer.
|
||||
</p>
|
||||
<div class="scroll-hint">Runterscrollen</div>
|
||||
</section>
|
||||
|
||||
<!-- COUNTER -->
|
||||
<section class="counter-section">
|
||||
<div class="counter-label">Aktuelle Freunde-Anzahl</div>
|
||||
<div class="counter-number" id="counter">0</div>
|
||||
<div class="counter-footnote">* Stand: gerade eben. Wird stündlich aktualisiert. Ändert sich nie.</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- STATS -->
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-num">0</div>
|
||||
<div class="stat-label">Geburtstagseinladungen</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-num">365</div>
|
||||
<div class="stat-label">Abende allein / Jahr</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-num">100%</div>
|
||||
<div class="stat-label">Sofa-Verfügbarkeit</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-num">∞</div>
|
||||
<div class="stat-label">Netflix ohne Diskussion</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- REASONS -->
|
||||
<section class="reasons">
|
||||
<h2>Warum man keine Freunde braucht</h2>
|
||||
|
||||
<div class="reason">
|
||||
<div class="reason-num">1</div>
|
||||
<div>
|
||||
<h3>Niemand sagt deinen Umzug ab</h3>
|
||||
<p>Weil dich sowieso niemand fragt. Problem gelöst. Du buchst einfach ein Umzugsunternehmen wie ein normaler Erwachsener.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reason">
|
||||
<div class="reason-num">2</div>
|
||||
<div>
|
||||
<h3>Die Fernbedienung gehört dir</h3>
|
||||
<p>Kein „Lass uns was zusammen schauen“. Kein Kompromiss. Staffel 4 True Crime um 3 Uhr nachts? Dein gutes Recht.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reason">
|
||||
<div class="reason-num">3</div>
|
||||
<div>
|
||||
<h3>Keine Gruppenrestaurant-Buchungen</h3>
|
||||
<p>„Wir sind 7. Nein, 6. Warte, Sandra kommt doch. Also 8.“ — Probleme, die du nie haben wirst.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reason">
|
||||
<div class="reason-num">4</div>
|
||||
<div>
|
||||
<h3>Spotify Wrapped ist ehrlich</h3>
|
||||
<p>Niemand urteilt über deine 847 Streams von demselben Song. Deine Daten, deine Scham, dein Geheimnis.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reason">
|
||||
<div class="reason-num">5</div>
|
||||
<div>
|
||||
<h3>Du sparst ein Vermögen</h3>
|
||||
<p>Keine Geburtstage, keine Hochzeiten, keine Geschenke. Das gesparte Geld investierst du in — naja, in dich. Wer sonst.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- TESTIMONIALS -->
|
||||
<section class="testimonials">
|
||||
<h2>Was unsere Nicht-Freunde sagen</h2>
|
||||
<p class="testimonials-sub">Hinweis: Keine dieser Personen existiert.</p>
|
||||
|
||||
<div class="testimonial-grid">
|
||||
<div class="testimonial">
|
||||
<blockquote>
|
||||
Seit ich auf keinefreun.de bin, habe ich endlich akzeptiert, dass meine Zimmerpflanze mein engster Vertrauter ist. Sie hört zu. Sie urteilt nicht. Sie stirbt langsam.
|
||||
</blockquote>
|
||||
<div class="testimonial-author">
|
||||
— Thorsten, 34
|
||||
<span>Softwareentwickler & Ficus-Besitzer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial">
|
||||
<blockquote>
|
||||
Ich habe mir selbst eine Sprachnachricht geschickt, um zu testen, ob mein Handy noch funktioniert. Tut es. Schreibt nur niemand.
|
||||
</blockquote>
|
||||
<div class="testimonial-author">
|
||||
— Melanie, 29
|
||||
<span>Senior Alleinsein-Consultant</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial">
|
||||
<blockquote>
|
||||
Mein Therapeut hat mich gefragt, wie es meinem sozialen Umfeld geht. Ich habe gelacht. Er hat nicht gelacht. Der Termin wurde verlängert.
|
||||
</blockquote>
|
||||
<div class="testimonial-author">
|
||||
— Jens, 41
|
||||
<span>Hobbyphilosoph & Tiefkühlpizza-Gourmet</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="faq">
|
||||
<h2>Häufig gestellte Fragen</h2>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">Ist das hier ernst gemeint?</div>
|
||||
<div class="faq-a">Definiere „ernst“. Definiere „gemeint“. Definiere „hier“. Siehst du, genau deshalb hat man keine Freunde.</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">Kann ich hier Freunde finden?</div>
|
||||
<div class="faq-a">Nein. Das ist explizit nicht der Zweck dieser Seite. Bitte lies den Domainnamen noch einmal langsam vor.</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">Ich habe aber Freunde?</div>
|
||||
<div class="faq-a">Das ist keine Frage. Und wir glauben dir nicht. Aber schön für dich.</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">Gibt es einen Newsletter?</div>
|
||||
<div class="faq-a">An wen sollten wir den schicken? Genau.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta">
|
||||
<h2>Bereit, niemanden kennenzulernen?</h2>
|
||||
<p>Tritt unserer Community bei. Sie besteht aus dir. Das war's.</p>
|
||||
<a class="btn" href="mailto:niemand@keinefreun.de">Kontakt (lol)</a>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="footer-domain">keinefreun.de</div>
|
||||
<p>Ein Projekt von jemandem ohne Freunde</p>
|
||||
<p style="margin-top: 0.5rem; opacity: 0.4;">© 2026 — Alle Rechte vorbehalten. Nicht dass es jemanden interessiert.</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/keinefreun.de/site.yaml
Normal file
4
sites/keinefreun.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: keinefreun.de
|
||||
template: custom
|
||||
title: "keinefreun.de — Offizielle Seite der Freundlosigkeit"
|
||||
description: ""
|
||||
60
sites/knzlmgmt.de/index.html
Normal file
60
sites/knzlmgmt.de/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>knzlmgmt.</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚖️</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--bg: #0a0a0c; --text: #e8e8ed; --text-dim: #6e6e7a; --text-muted: #44444f;
|
||||
--accent: #9b7ed8; --accent-glow: rgba(155, 126, 216, 0.15);
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg); color: var(--text);
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body::before {
|
||||
content: ''; position: fixed; inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none; z-index: 9999;
|
||||
}
|
||||
.container { text-align: center; padding: 2rem; max-width: 700px; }
|
||||
.icon { font-size: 4rem; margin-bottom: 32px; }
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 700;
|
||||
letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 24px;
|
||||
}
|
||||
h1 .accent { color: var(--accent); }
|
||||
.divider { width: 60px; height: 2px; background: var(--accent); margin: 0 auto 32px; opacity: 0.5; }
|
||||
.subtitle {
|
||||
font-size: 1.15rem; color: var(--text-dim); font-weight: 300;
|
||||
line-height: 1.7; max-width: 520px; margin: 0 auto 48px;
|
||||
}
|
||||
.footer { margin-top: 64px; font-size: 0.72rem; color: var(--text-muted); }
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.container > * { animation: fadeIn 0.8s ease forwards; opacity: 0; }
|
||||
.container > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.container > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.container > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.container > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.container > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="icon">⚖️</div>
|
||||
<h1>knzl<span class='accent'>mgmt</span>.</h1>
|
||||
<div class="divider"></div>
|
||||
<p class="subtitle">Kanzleimanagement. Neu gedacht.</p>
|
||||
<p class="footer">knzlmgmt.de</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/knzlmgmt.de/site.yaml
Normal file
4
sites/knzlmgmt.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: knzlmgmt.de
|
||||
template: custom
|
||||
title: "knzlmgmt."
|
||||
description: ""
|
||||
60
sites/kopffrai.de/index.html
Normal file
60
sites/kopffrai.de/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>kopffrAI.</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧠</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--bg: #0a0a0c; --text: #e8e8ed; --text-dim: #6e6e7a; --text-muted: #44444f;
|
||||
--accent: #6b8cce; --accent-glow: rgba(107, 140, 206, 0.15);
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg); color: var(--text);
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body::before {
|
||||
content: ''; position: fixed; inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none; z-index: 9999;
|
||||
}
|
||||
.container { text-align: center; padding: 2rem; max-width: 700px; }
|
||||
.icon { font-size: 4rem; margin-bottom: 32px; }
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 700;
|
||||
letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 24px;
|
||||
}
|
||||
h1 .accent { color: var(--accent); }
|
||||
.divider { width: 60px; height: 2px; background: var(--accent); margin: 0 auto 32px; opacity: 0.5; }
|
||||
.subtitle {
|
||||
font-size: 1.15rem; color: var(--text-dim); font-weight: 300;
|
||||
line-height: 1.7; max-width: 520px; margin: 0 auto 48px;
|
||||
}
|
||||
.footer { margin-top: 64px; font-size: 0.72rem; color: var(--text-muted); }
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.container > * { animation: fadeIn 0.8s ease forwards; opacity: 0; }
|
||||
.container > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.container > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.container > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.container > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.container > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="icon">🧠</div>
|
||||
<h1>kopf<span class='accent'>frAI</span>.</h1>
|
||||
<div class="divider"></div>
|
||||
<p class="subtitle">Klarer Kopf. Kuenstliche Intelligenz.</p>
|
||||
<p class="footer">kopffrAI.de</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/kopffrai.de/site.yaml
Normal file
4
sites/kopffrai.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: kopffrai.de
|
||||
template: custom
|
||||
title: "kopffrAI."
|
||||
description: ""
|
||||
364
sites/legalais.de/index.html
Normal file
364
sites/legalais.de/index.html
Normal file
@@ -0,0 +1,364 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Legal AIs — KI fuer die Rechtspraxis</title>
|
||||
<meta name="description" content="Legal AIs — Kuenstliche Intelligenz, die Rechtsarbeit transformiert. Recherche, Analyse, Entwuerfe — praezise, schnell, zuverlaessig.">
|
||||
<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'>L</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--bg-elevated: #111115;
|
||||
--bg-card: #16161b;
|
||||
--border: #1e1e26;
|
||||
--text: #e8e8ed;
|
||||
--text-dim: #6e6e7a;
|
||||
--text-muted: #44444f;
|
||||
--accent: #3b82f6;
|
||||
--accent-glow: rgba(59, 130, 246, 0.15);
|
||||
--accent-subtle: rgba(59, 130, 246, 0.08);
|
||||
--gold: #c9a84c;
|
||||
--gold-glow: rgba(201, 168, 76, 0.12);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 20px 0;
|
||||
background: rgba(10, 10, 12, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
|
||||
.logo .legal { color: var(--text); }
|
||||
.logo .ai { color: var(--accent); font-weight: 700; }
|
||||
.logo .s { color: var(--text-dim); font-weight: 300; }
|
||||
nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
|
||||
nav a:hover { color: var(--text); }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 180px 0 120px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 60px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 700px; height: 500px;
|
||||
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem; font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.06em; text-transform: uppercase;
|
||||
margin-bottom: 32px;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
.hero-badge .dot {
|
||||
display: inline-block; width: 6px; height: 6px;
|
||||
background: var(--accent); border-radius: 50%; margin-right: 8px;
|
||||
box-shadow: 0 0 8px var(--accent-glow);
|
||||
position: relative; top: -1px;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 6vw, 4.5rem);
|
||||
font-weight: 700; letter-spacing: -0.04em;
|
||||
line-height: 1.05; margin-bottom: 24px;
|
||||
}
|
||||
h1 .ai { color: var(--accent); }
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem; color: var(--text-dim);
|
||||
max-width: 560px; margin: 0 auto 48px;
|
||||
line-height: 1.7; font-weight: 300;
|
||||
}
|
||||
.hero p strong { color: var(--text); font-weight: 500; }
|
||||
|
||||
.cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 14px 28px; border-radius: 10px;
|
||||
font-size: 0.9rem; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.2s; border: none; cursor: pointer;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--accent); color: #fff;
|
||||
box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: #2563eb; transform: translateY(-1px);
|
||||
box-shadow: 0 0 50px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
|
||||
.btn-ghost:hover { color: var(--text); border-color: #2a2a35; background: var(--bg-elevated); }
|
||||
|
||||
/* Terminal */
|
||||
.terminal {
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 24px 28px;
|
||||
margin-top: 56px; max-width: 560px;
|
||||
margin-left: auto; margin-right: auto; text-align: left;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 0.82rem; line-height: 1.8;
|
||||
}
|
||||
.terminal-dots { display: flex; gap: 6px; margin-bottom: 16px; }
|
||||
.terminal-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
|
||||
.terminal .prompt { color: var(--text-muted); }
|
||||
.terminal .cmd { color: var(--text-dim); }
|
||||
.terminal .out { color: var(--accent); }
|
||||
.terminal .gold { color: var(--gold); }
|
||||
.terminal .dim { color: var(--text-muted); }
|
||||
|
||||
/* Sections */
|
||||
section { padding: 100px 0; }
|
||||
.section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
|
||||
h2 { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 16px; }
|
||||
.section-desc { color: var(--text-dim); font-size: 1rem; max-width: 520px; margin-bottom: 56px; font-weight: 300; line-height: 1.7; }
|
||||
.divider { height: 1px; background: var(--border); max-width: 860px; margin: 0 auto; }
|
||||
|
||||
/* Features */
|
||||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.feature-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 14px; padding: 32px;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.feature-card:hover { border-color: #2a2a35; box-shadow: 0 8px 40px rgba(0,0,0,0.3); }
|
||||
.feature-icon {
|
||||
width: 40px; height: 40px; border-radius: 10px;
|
||||
background: var(--accent-subtle); border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 20px; font-size: 0.85rem; font-weight: 600; color: var(--accent);
|
||||
}
|
||||
.feature-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
|
||||
.feature-card p { color: var(--text-dim); font-size: 0.86rem; line-height: 1.6; font-weight: 300; }
|
||||
|
||||
/* Audience */
|
||||
.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
||||
.audience-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 14px; padding: 28px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.audience-card:hover { border-color: #2a2a35; }
|
||||
.audience-card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; }
|
||||
.audience-card p { color: var(--text-dim); font-size: 0.84rem; line-height: 1.6; font-weight: 300; }
|
||||
|
||||
/* CTA */
|
||||
.cta-section { text-align: center; padding: 80px 0 120px; }
|
||||
.cta-section h2 { margin-bottom: 12px; }
|
||||
.cta-section .section-desc { margin: 0 auto 40px; }
|
||||
|
||||
footer { padding: 40px 0; text-align: center; border-top: 1px solid var(--border); }
|
||||
footer p { color: var(--text-muted); font-size: 0.78rem; }
|
||||
footer a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
|
||||
footer a:hover { color: var(--text-dim); }
|
||||
|
||||
@media (max-width: 768px) { .features-grid, .audience-grid { grid-template-columns: 1fr; } }
|
||||
@media (max-width: 640px) {
|
||||
.hero { padding: 140px 0 80px; }
|
||||
section { padding: 64px 0; }
|
||||
.terminal { font-size: 0.75rem; padding: 18px 20px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo"><span class="legal">Legal</span><span class="ai">AI</span><span class="s">s</span></div>
|
||||
<a href="#waitlist">Zugang anfragen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-badge">
|
||||
<span class="dot"></span>Coming Soon
|
||||
</div>
|
||||
<h1>Legal<span class="ai">AI</span>s.</h1>
|
||||
<p>
|
||||
<strong>Kuenstliche Intelligenz fuer die Rechtspraxis.</strong>
|
||||
Recherche, Analyse, Schriftsaetze — praezise, schnell
|
||||
und mit dem Verstaendnis eines Juristen.
|
||||
</p>
|
||||
<div class="cta-group">
|
||||
<a href="#waitlist" class="btn btn-primary">Zugang anfragen</a>
|
||||
<a href="#features" class="btn btn-ghost">Was wir bauen</a>
|
||||
</div>
|
||||
|
||||
<div class="terminal">
|
||||
<div class="terminal-dots"><span></span><span></span><span></span></div>
|
||||
<div><span class="prompt">$</span> <span class="cmd">legalai research "BGH Klimaneutral Werbung"</span></div>
|
||||
<div><span class="out">3 Leitentscheidungen gefunden</span></div>
|
||||
<div><span class="out">BGH I ZR 98/23 — klimaneutral (27.06.2024)</span></div>
|
||||
<div><span class="gold">Kernaussage extrahiert, Argumentationslinie erstellt</span></div>
|
||||
<div><span class="dim">Memo-Entwurf bereit. 47 Sekunden.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="features">
|
||||
<div class="container">
|
||||
<div class="section-label">Capabilities</div>
|
||||
<h2>Was Legal AIs kann.</h2>
|
||||
<div class="section-desc">
|
||||
Nicht ein Tool fuer alles. Sondern spezialisierte KI-Agenten,
|
||||
die zusammenarbeiten — wie ein Team, das nie schlaeft.
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">R</div>
|
||||
<h3>Recherche</h3>
|
||||
<p>
|
||||
Rechtsprechungssuche ueber Datenbanken, Querverweise,
|
||||
Argumentationslinien. In Sekunden statt Stunden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">A</div>
|
||||
<h3>Analyse</h3>
|
||||
<p>
|
||||
Urteile strukturiert auswerten. Kernaussagen extrahieren.
|
||||
Parallelen zu eigenen Faellen erkennen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">E</div>
|
||||
<h3>Entwuerfe</h3>
|
||||
<p>
|
||||
Schriftsatz-Entwuerfe, Memos, Stellungnahmen.
|
||||
Im Stil der Kanzlei, mit den richtigen Zitaten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">W</div>
|
||||
<h3>Wissensmanagement</h3>
|
||||
<p>
|
||||
Kanzlei-Knowledge aufbauen und pflegen. Musterloesungen,
|
||||
Textbausteine, Entscheidungssammlungen — immer aktuell.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">M</div>
|
||||
<h3>Monitoring</h3>
|
||||
<p>
|
||||
Neue Entscheidungen, Gesetzesaenderungen, Fristen.
|
||||
Proaktive Benachrichtigungen statt manueller Checks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">O</div>
|
||||
<h3>Orchestrierung</h3>
|
||||
<p>
|
||||
Mehrere KI-Agenten arbeiten parallel. Recherche + Analyse +
|
||||
Entwurf — koordiniert in einem Workflow.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="who">
|
||||
<div class="container">
|
||||
<div class="section-label">Fuer wen</div>
|
||||
<h2>Gebaut fuer Profis.</h2>
|
||||
<div class="section-desc">
|
||||
Legal AIs ist kein generischer Chatbot. Es ist ein Werkzeug
|
||||
fuer Menschen, die wissen was sie tun — und schneller ans Ziel wollen.
|
||||
</div>
|
||||
|
||||
<div class="audience-grid">
|
||||
<div class="audience-card">
|
||||
<h3>Kanzleien</h3>
|
||||
<p>Recherchezeit reduzieren, Wissensmanagement automatisieren, Mandanten schneller bedienen.</p>
|
||||
</div>
|
||||
<div class="audience-card">
|
||||
<h3>Rechtsabteilungen</h3>
|
||||
<p>Interne Anfragen effizient bearbeiten, Compliance-Fragen klaeren, Vertragspruefung beschleunigen.</p>
|
||||
</div>
|
||||
<div class="audience-card">
|
||||
<h3>Knowledge Lawyers</h3>
|
||||
<p>Wissensprodukte erstellen, Entscheidungssammlungen pflegen, Trend-Monitoring aufsetzen.</p>
|
||||
</div>
|
||||
<div class="audience-card">
|
||||
<h3>Einzelanwaelte</h3>
|
||||
<p>Die Ressourcen einer Grosskanzlei — ohne das Team. KI als Co-Pilot fuer die eigene Praxis.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="waitlist" class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-label">Early Access</div>
|
||||
<h2>Recht. Neu gedacht.</h2>
|
||||
<div class="section-desc">
|
||||
Legal AIs ist in der Entwicklung. Meld dich an und gehoer zu den Ersten,
|
||||
die juristische KI wirklich nutzen.
|
||||
</div>
|
||||
<a href="mailto:mail@msbls.de?subject=LegalAIs%20—%20Interesse" class="btn btn-primary">
|
||||
Zugang anfragen
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>Legal<span style="color: var(--accent);">AI</span>s.de — ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/legalais.de/site.yaml
Normal file
4
sites/legalais.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: legalais.de
|
||||
template: custom
|
||||
title: "Legal AIs — KI fuer die Rechtspraxis"
|
||||
description: "Legal AIs — Kuenstliche Intelligenz, die Rechtsarbeit transformiert. Recherche, Analyse, Entwuerfe — praezise, schnell, zuverlaessig."
|
||||
228
sites/machesdocheinfach.de/index.html
Normal file
228
sites/machesdocheinfach.de/index.html
Normal file
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mach es doch einfach.</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #faf8f5;
|
||||
--text: #2a2520;
|
||||
--text-soft: #6b6259;
|
||||
--text-faint: #a89878;
|
||||
--accent: #e8783a;
|
||||
--accent-soft: rgba(232, 120, 58, 0.12);
|
||||
--line: rgba(232, 120, 58, 0.15);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Newsreader', Georgia, serif;
|
||||
background: var(--bg); color: var(--text);
|
||||
line-height: 1.8; -webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page {
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
padding: 120px 24px 80px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 48px;
|
||||
animation: launch 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes launch {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-6px) rotate(3deg); }
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Newsreader', Georgia, serif;
|
||||
font-size: clamp(2.2rem, 5vw, 3rem);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 40px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
h1 em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.rule {
|
||||
width: 40px; height: 2px;
|
||||
background: var(--accent); margin: 0 auto 40px 0;
|
||||
opacity: 0.4; border-radius: 1px;
|
||||
}
|
||||
|
||||
.prose { margin-bottom: 48px; }
|
||||
|
||||
.prose p {
|
||||
font-size: 1.08rem; color: var(--text-soft);
|
||||
font-weight: 300; line-height: 1.9; margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.prose p:last-child { margin-bottom: 0; }
|
||||
.prose em { color: var(--text); font-style: italic; }
|
||||
.prose strong { color: var(--accent); font-weight: 500; }
|
||||
|
||||
.highlight {
|
||||
background: var(--accent-soft);
|
||||
padding: 28px 32px; border-radius: 14px;
|
||||
border-left: 3px solid var(--accent);
|
||||
margin: 48px 0;
|
||||
}
|
||||
|
||||
.highlight p {
|
||||
font-size: 1.05rem; color: var(--text-soft);
|
||||
font-weight: 300; font-style: italic; line-height: 1.8;
|
||||
}
|
||||
|
||||
.steps {
|
||||
margin: 48px 0;
|
||||
counter-reset: step;
|
||||
}
|
||||
|
||||
.step {
|
||||
counter-increment: step;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.step:last-child { border-bottom: none; }
|
||||
|
||||
.step::before {
|
||||
content: counter(step) ".";
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.step p {
|
||||
font-size: 1rem; color: var(--text-soft);
|
||||
font-weight: 300; line-height: 1.7;
|
||||
}
|
||||
|
||||
.closing {
|
||||
margin-top: 56px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.closing p {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text);
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 64px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--line);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.page > * { animation: fadeUp 0.8s ease forwards; opacity: 0; }
|
||||
.page > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.page > *:nth-child(2) { animation-delay: 0.4s; }
|
||||
.page > *:nth-child(3) { animation-delay: 0.7s; }
|
||||
.page > *:nth-child(4) { animation-delay: 1.0s; }
|
||||
.page > *:nth-child(5) { animation-delay: 1.3s; }
|
||||
.page > *:nth-child(6) { animation-delay: 1.6s; }
|
||||
.page > *:nth-child(7) { animation-delay: 1.9s; }
|
||||
.page > *:nth-child(8) { animation-delay: 2.2s; }
|
||||
|
||||
@media (max-width: 540px) { .page { padding: 80px 20px 60px; } .highlight { padding: 20px 24px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page">
|
||||
|
||||
<div class="icon">🚀</div>
|
||||
|
||||
<h1>Mach es doch <em>einfach</em>.</h1>
|
||||
|
||||
<div class="rule"></div>
|
||||
|
||||
<div class="prose">
|
||||
<p>
|
||||
Du denkst schon zu lange darüber nach. Du planst, du wägst ab,
|
||||
du wartest auf den richtigen Moment. Aber der richtige Moment
|
||||
ist <em>jetzt</em>.
|
||||
</p>
|
||||
<p>
|
||||
Nicht morgen. Nicht wenn du bereit bist. Nicht wenn alles
|
||||
perfekt ist. Denn perfekt wird es nie sein — und das ist
|
||||
der Punkt. <strong>Es muss nicht perfekt sein. Es muss nur anfangen.</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight">
|
||||
<p>
|
||||
„Die meisten Menschen scheitern nicht am Können.
|
||||
Sie scheitern am Anfangen."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<p>Hör auf zu googeln, ob es eine gute Idee ist.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p>Mach den ersten Schritt. Egal wie klein.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p>Erzähl jemandem davon. Dann gibt es kein Zurück.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p>Akzeptiere, dass es am Anfang schlecht sein wird.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p>Mach weiter. Jeden Tag ein bisschen besser.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="closing">
|
||||
<p>
|
||||
Du kannst das. Und du weißt es.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>machesdocheinfach.de</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/machesdocheinfach.de/site.yaml
Normal file
4
sites/machesdocheinfach.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: machesdocheinfach.de
|
||||
template: custom
|
||||
title: "Mach es doch einfach."
|
||||
description: ""
|
||||
440
sites/mai-otto.de/index.html
Normal file
440
sites/mai-otto.de/index.html
Normal file
@@ -0,0 +1,440 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Otto — mAI Personal Assistant</title>
|
||||
<meta name="description" content="Otto ist Matthias' autonomer KI-Assistent. E-Mail, Kalender, Infrastruktur, Recherche — alles im Griff.">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐙</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #060610;
|
||||
--bg-card: #0e0e1a;
|
||||
--border: #1a1a2e;
|
||||
--text: #e8e8f0;
|
||||
--text-dim: #7070a0;
|
||||
--text-muted: #404068;
|
||||
--octopus: #e85040;
|
||||
--octopus-glow: rgba(232, 80, 64, 0.2);
|
||||
--octopus-subtle: rgba(232, 80, 64, 0.06);
|
||||
--teal: #40c8b8;
|
||||
--teal-glow: rgba(64, 200, 184, 0.15);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 30%; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 800px; height: 600px;
|
||||
background:
|
||||
radial-gradient(ellipse at 40% 40%, var(--octopus-glow) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 60% 60%, var(--teal-glow) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
animation: drift 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
0%, 100% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.hero-content { position: relative; z-index: 1; }
|
||||
|
||||
.octopus {
|
||||
font-size: 5rem;
|
||||
margin-bottom: 32px;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
25% { transform: translateY(-8px) rotate(-2deg); }
|
||||
75% { transform: translateY(-4px) rotate(2deg); }
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: clamp(3rem, 7vw, 5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h1 .otto { color: var(--octopus); }
|
||||
|
||||
.tagline {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-dim);
|
||||
max-width: 520px;
|
||||
margin: 0 auto 48px;
|
||||
line-height: 1.8;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Tentacles = capabilities */
|
||||
.tentacles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
.tentacle {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px 16px;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tentacle:hover {
|
||||
border-color: var(--octopus);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px rgba(232, 80, 64, 0.08);
|
||||
}
|
||||
|
||||
.tentacle-icon { font-size: 1.5rem; margin-bottom: 10px; }
|
||||
|
||||
.tentacle h3 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tentacle p {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section { padding: 100px 0; }
|
||||
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), var(--octopus), var(--border), transparent); max-width: 860px; margin: 0 auto; }
|
||||
.section-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--octopus); margin-bottom: 16px; }
|
||||
h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 16px; }
|
||||
.section-desc { color: var(--text-dim); font-size: 0.95rem; max-width: 520px; margin-bottom: 48px; font-weight: 300; line-height: 1.7; }
|
||||
|
||||
/* Terminal */
|
||||
.terminal {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px 28px;
|
||||
max-width: 580px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.terminal-dots { display: flex; gap: 6px; margin-bottom: 16px; }
|
||||
.terminal-dots span { width: 10px; height: 10px; border-radius: 50%; }
|
||||
.terminal-dots span:nth-child(1) { background: var(--octopus); }
|
||||
.terminal-dots span:nth-child(2) { background: #e8a030; }
|
||||
.terminal-dots span:nth-child(3) { background: var(--teal); }
|
||||
.terminal .prompt { color: var(--text-muted); }
|
||||
.terminal .cmd { color: var(--text-dim); }
|
||||
.terminal .out { color: var(--teal); }
|
||||
.terminal .otto-out { color: var(--octopus); }
|
||||
.terminal .dim { color: var(--text-muted); }
|
||||
|
||||
/* Stats */
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--octopus);
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-section { text-align: center; padding: 80px 0 120px; }
|
||||
|
||||
.cta-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 32px;
|
||||
border-radius: 10px;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: var(--octopus);
|
||||
box-shadow: 0 0 30px var(--octopus-glow);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.cta-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 50px var(--octopus-glow);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.cta-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: none;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.cta-ghost:hover {
|
||||
color: var(--text);
|
||||
border-color: #2a2a40;
|
||||
background: var(--bg-card);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
footer .otto { color: var(--octopus); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.tentacles { grid-template-columns: repeat(2, 1fr); }
|
||||
.stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||||
section { padding: 64px 0; }
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.hero-content > * {
|
||||
animation: fadeUp 0.8s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.hero-content > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.hero-content > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.hero-content > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.hero-content > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
.hero-content > *:nth-child(6) { animation-delay: 1.2s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="octopus">🐙</div>
|
||||
<h1><span class="otto">Otto</span></h1>
|
||||
<div class="tagline">So viel mehr als nur ein Assistent.</div>
|
||||
|
||||
<p class="hero-desc">
|
||||
Ich bin Otto. Ich manage E-Mails, koordiniere Termine,
|
||||
überwache Infrastruktur, recherchiere, deploye Websites
|
||||
und erledige, was anfällt. Autonom, rund um die Uhr, mit acht Armen.
|
||||
</p>
|
||||
|
||||
<div class="tentacles">
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">📧</div>
|
||||
<h3>E-Mail</h3>
|
||||
<p>Lesen, sortieren, antworten</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">📅</div>
|
||||
<h3>Kalender</h3>
|
||||
<p>Termine, Konflikte, Erinnerungen</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🔧</div>
|
||||
<h3>Infrastruktur</h3>
|
||||
<p>Server, Deploys, Monitoring</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🔍</div>
|
||||
<h3>Recherche</h3>
|
||||
<p>Web, Recht, Datenbanken</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">💬</div>
|
||||
<h3>WhatsApp</h3>
|
||||
<p>Chat, Sprachnachrichten</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🌐</div>
|
||||
<h3>Websites</h3>
|
||||
<p>Domain bis Deploy in Minuten</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🎵</div>
|
||||
<h3>Musik</h3>
|
||||
<p>Spotify, Playlists, Stimmung</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🏠</div>
|
||||
<h3>Smart Home</h3>
|
||||
<p>Licht, Klima, Szenen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">// live</div>
|
||||
<h2>So sieht mein Tag aus.</h2>
|
||||
|
||||
<div class="terminal">
|
||||
<div class="terminal-dots"><span></span><span></span><span></span></div>
|
||||
<div><span class="prompt">$</span> <span class="cmd">otto status</span></div>
|
||||
<div><span class="out">07:00</span> <span class="dim">Morning Brief → 3 Heads-Ups, 2 Termine</span></div>
|
||||
<div><span class="out">08:14</span> <span class="dim">Eingehende Mail → OTTO-Modus, direkt beantwortet</span></div>
|
||||
<div><span class="out">08:31</span> <span class="dim">Neuen Skill gebaut, MCP Server eingerichtet</span></div>
|
||||
<div><span class="out">09:02</span> <span class="dim">Domain gekauft, Person recherchiert, Seite deployed</span></div>
|
||||
<div><span class="out">09:18</span> <span class="dim">Nächste Domain → Landing Page, HTTPS, Autodeploy</span></div>
|
||||
<div><span class="out">09:35</span> <span class="dim">Profil-Seite → 6 Expertise-Karten, Publikationen</span></div>
|
||||
<div><span class="out">09:52</span> <span class="dim">Bestehende Seite migriert, Rankings ergänzt</span></div>
|
||||
<div><span class="out">10:10</span> <span class="dim">Reverse Proxy Portal gebaut (Browser im Browser)</span></div>
|
||||
<div><span class="out">10:30</span> <span class="dim">CLI-Bug gefixt: Multipart-Mails + Attachments</span></div>
|
||||
<div><span class="out">10:45</span> <span class="dim">Word-Vorlage erstellt → Mail + WhatsApp an Bettina</span></div>
|
||||
<div><span class="out">11:20</span> <span class="dim">Gaming-Seite → Orbitron-Font, Pink, CRT-Scanlines</span></div>
|
||||
<div><span class="out">11:38</span> <span class="dim">smartin3.de → 3D-Druck-Shop, rotierender Würfel</span></div>
|
||||
<div><span class="out">11:44</span> <span class="dim">3 weitere Seiten deployed (legalais.de, wartebitte.de, osterai.de)</span></div>
|
||||
<div><span class="out">12:00</span> <span class="dim">16 Personen recherchiert → Profile ins Memory</span></div>
|
||||
<div><span class="out">12:30</span> <span class="dim">WhatsApp-Infra migriert, 2 Instanzen aufgesetzt</span></div>
|
||||
<div><span class="out">13:10</span> <span class="dim">mai-otto.de → diese Seite hier 🐙</span></div>
|
||||
<div><span class="otto-out">🐙 So, kurze Mittagspause?</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">// stack</div>
|
||||
<h2>Unter der Haube.</h2>
|
||||
<div class="section-desc">
|
||||
Ottonom. Ottomatisch. Orchestriert mit mAI, deployed auf eigener Infrastruktur.
|
||||
Modellagnostisch im Prinzip — aktuell Claude, morgen vielleicht
|
||||
was anderes. Die Intelligenz steckt im System, nicht im Modell.
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div>
|
||||
<div class="stat-num">50+</div>
|
||||
<div class="stat-label">Skills</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-num">24/7</div>
|
||||
<div class="stat-label">Verfügbar</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-num">8</div>
|
||||
<div class="stat-label">Tentakel</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-num">∞</div>
|
||||
<div class="stat-label">Geduld</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-label">// kontakt</div>
|
||||
<h2>Schreib mir.</h2>
|
||||
<div class="section-desc" style="margin: 0 auto 40px;">
|
||||
Per WhatsApp, per Mail, oder sag einfach "Otto".
|
||||
</div>
|
||||
<a href="https://wa.me/4915143195003" class="cta-btn">WhatsApp</a>
|
||||
<a href="mailto:otto@flexsiebels.de" class="cta-btn cta-ghost">E-Mail</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><span class="otto">Otto</span> — mai-otto.de — ein Projekt von <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
8
sites/mai-otto.de/site.yaml
Normal file
8
sites/mai-otto.de/site.yaml
Normal file
@@ -0,0 +1,8 @@
|
||||
domain: mai-otto.de
|
||||
aliases:
|
||||
- otto.flexsiebels.de
|
||||
- ottomatisch.de
|
||||
- ichbinotto.de
|
||||
template: custom
|
||||
title: "otto"
|
||||
description: "otto — personal AI assistant"
|
||||
396
sites/martinsiebels.de/index.html
Normal file
396
sites/martinsiebels.de/index.html
Normal file
@@ -0,0 +1,396 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Martin Siebels — Profil</title>
|
||||
<meta name="description" content="Martin Siebels — Osnabrück. Berufliches Profil.">
|
||||
<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'>M</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--bg-elevated: #111115;
|
||||
--bg-card: #16161b;
|
||||
--border: #1e1e26;
|
||||
--text: #e8e8ed;
|
||||
--text-dim: #6e6e7a;
|
||||
--text-muted: #44444f;
|
||||
--accent: #3b82f6;
|
||||
--accent-glow: rgba(59, 130, 246, 0.15);
|
||||
--accent-subtle: rgba(59, 130, 246, 0.08);
|
||||
--orange: #f97316;
|
||||
--orange-glow: rgba(249, 115, 22, 0.15);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 20px 0;
|
||||
background: rgba(10, 10, 12, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
|
||||
.logo .accent { color: var(--accent); }
|
||||
nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
|
||||
nav a:hover { color: var(--text); }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 180px 0 120px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 80px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 600px; height: 400px;
|
||||
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.monogram {
|
||||
width: 96px; height: 96px; border-radius: 50%;
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin: 0 auto 40px;
|
||||
font-size: 1.6rem; font-weight: 600; color: var(--accent);
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem; font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 32px;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
.hero-badge .dot {
|
||||
display: inline-block; width: 6px; height: 6px;
|
||||
background: var(--accent); border-radius: 50%; margin-right: 8px;
|
||||
position: relative; top: -1px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.6rem, 6vw, 4rem);
|
||||
font-weight: 700; letter-spacing: -0.04em;
|
||||
line-height: 1.1; margin-bottom: 16px;
|
||||
}
|
||||
h1 .accent { color: var(--accent); }
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.15rem; color: var(--text-dim);
|
||||
max-width: 600px; margin: 0 auto 20px;
|
||||
line-height: 1.7; font-weight: 300;
|
||||
}
|
||||
.hero-subtitle strong { color: var(--text); font-weight: 500; }
|
||||
|
||||
.hero-tags {
|
||||
display: flex; gap: 8px; justify-content: center;
|
||||
flex-wrap: wrap; margin-bottom: 48px;
|
||||
}
|
||||
.tag {
|
||||
padding: 4px 14px; border: 1px solid var(--border);
|
||||
border-radius: 100px; font-size: 0.72rem; font-weight: 500;
|
||||
color: var(--text-muted); background: var(--bg-elevated);
|
||||
}
|
||||
.tag.highlight { color: var(--accent); border-color: rgba(59, 130, 246, 0.25); }
|
||||
|
||||
.cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 14px 28px; border-radius: 10px;
|
||||
font-size: 0.9rem; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.2s; border: none; cursor: pointer;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--accent); color: #fff;
|
||||
box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
}
|
||||
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 50px var(--accent-glow); filter: brightness(1.1); }
|
||||
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
|
||||
.btn-ghost:hover { color: var(--text); border-color: #2a2a35; background: var(--bg-elevated); }
|
||||
|
||||
/* Sections */
|
||||
section { padding: 100px 0; }
|
||||
.section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
|
||||
h2 { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 16px; }
|
||||
.section-desc { color: var(--text-dim); font-size: 1rem; max-width: 520px; margin-bottom: 48px; font-weight: 300; line-height: 1.7; }
|
||||
.divider { height: 1px; background: var(--border); max-width: 860px; margin: 0 auto; }
|
||||
|
||||
/* Profile section */
|
||||
.profile-section { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
|
||||
.profile-text p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.8; font-weight: 300; margin-bottom: 20px; }
|
||||
.profile-text p:last-child { margin-bottom: 0; }
|
||||
.detail-list { display: flex; flex-direction: column; gap: 14px; }
|
||||
.detail-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; }
|
||||
.detail-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
|
||||
.detail-value { font-size: 0.9rem; color: var(--text-dim); font-weight: 300; }
|
||||
|
||||
/* Skills grid */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.card {
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 14px; padding: 28px;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.card:hover { border-color: #2a2a35; box-shadow: 0 8px 40px rgba(0,0,0,0.3); }
|
||||
.card.primary { border-color: rgba(59, 130, 246, 0.2); background: linear-gradient(135deg, var(--bg-card), rgba(59, 130, 246, 0.03)); }
|
||||
.card.primary:hover { border-color: rgba(59, 130, 246, 0.35); }
|
||||
.card-icon { font-size: 1.4rem; margin-bottom: 16px; }
|
||||
.card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
|
||||
.card p { color: var(--text-dim); font-size: 0.86rem; line-height: 1.6; font-weight: 300; }
|
||||
|
||||
/* Side project teaser */
|
||||
.teaser {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid rgba(249, 115, 22, 0.2);
|
||||
border-radius: 16px;
|
||||
padding: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.teaser:hover { border-color: rgba(249, 115, 22, 0.4); }
|
||||
.teaser-label {
|
||||
font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
|
||||
}
|
||||
.teaser h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 8px; }
|
||||
.teaser h3 .orange { color: var(--orange); }
|
||||
.teaser p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.7; font-weight: 300; max-width: 480px; }
|
||||
.btn-orange {
|
||||
background: var(--orange); color: #0a0a0c;
|
||||
box-shadow: 0 0 30px var(--orange-glow);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-orange:hover { transform: translateY(-1px); box-shadow: 0 0 50px var(--orange-glow); filter: brightness(1.1); }
|
||||
|
||||
/* Footer */
|
||||
footer { padding: 40px 0; text-align: center; border-top: 1px solid var(--border); }
|
||||
footer p { color: var(--text-muted); font-size: 0.75rem; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.profile-section { grid-template-columns: 1fr; gap: 32px; }
|
||||
.teaser { grid-template-columns: 1fr; text-align: center; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.hero { padding: 140px 0 80px; }
|
||||
section { padding: 64px 0; }
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.hero > .container > * { animation: fadeUp 0.8s ease forwards; opacity: 0; }
|
||||
.hero > .container > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.hero > .container > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.hero > .container > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.hero > .container > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.hero > .container > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
.hero > .container > *:nth-child(6) { animation-delay: 1.1s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo">Martin <span class="accent">Siebels</span></div>
|
||||
<a href="#kontakt">Kontakt</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="monogram">MS</div>
|
||||
<div class="hero-badge"><span class="dot"></span>Osnabrück</div>
|
||||
<h1>Martin<br><span class="accent">Siebels</span></h1>
|
||||
<p class="hero-subtitle">
|
||||
<strong>Hands-on Mentalitaet</strong> trifft technisches Verstaendnis.
|
||||
Strukturiert im Beruf, kreativ in der Freizeit — immer mit dem Anspruch,
|
||||
Dinge besser zu machen.
|
||||
</p>
|
||||
<div class="hero-tags">
|
||||
<span class="tag highlight">Technik</span>
|
||||
<span class="tag highlight">Handwerk</span>
|
||||
<span class="tag">Problemloesung</span>
|
||||
<span class="tag">Teamwork</span>
|
||||
<span class="tag">Osnabrück</span>
|
||||
</div>
|
||||
<div class="cta-group">
|
||||
<a href="#kontakt" class="btn btn-primary">Kontakt aufnehmen</a>
|
||||
<a href="#profil" class="btn btn-ghost">Mehr erfahren</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="profil">
|
||||
<div class="container">
|
||||
<div class="section-label">Profil</div>
|
||||
<h2>Wer ich bin.</h2>
|
||||
|
||||
<div class="profile-section">
|
||||
<div class="profile-text">
|
||||
<p>
|
||||
Martin Siebels kommt aus Osnabrück und bringt eine Kombination
|
||||
aus technischem Know-how, handwerklichem Geschick und
|
||||
strukturierter Arbeitsweise mit.
|
||||
</p>
|
||||
<p>
|
||||
Ob im Beruf oder im eigenen Projekt — der Anspruch ist immer
|
||||
der gleiche: Dinge richtig machen, pragmatisch loesen und
|
||||
dabei nie aufhoeren, Neues zu lernen.
|
||||
</p>
|
||||
<p>
|
||||
Neben seiner beruflichen Taetigkeit betreibt Martin mit
|
||||
sMARTin 3D einen eigenen 3D-Druck-Service — von der Idee
|
||||
ueber den Prototyp bis zum fertigen Teil.
|
||||
</p>
|
||||
</div>
|
||||
<div class="detail-list">
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Standort</div>
|
||||
<div class="detail-value">Osnabrück, Niedersachsen</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Jahrgang</div>
|
||||
<div class="detail-value">1989</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">E-Mail</div>
|
||||
<div class="detail-value">martin_siebels@web.de</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Side Project</div>
|
||||
<div class="detail-value">sMARTin 3D — 3D-Druck-Service</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="kompetenzen">
|
||||
<div class="container">
|
||||
<div class="section-label">Kompetenzen</div>
|
||||
<h2>Was ich mitbringe.</h2>
|
||||
<div class="section-desc">
|
||||
Eine Mischung aus beruflicher Erfahrung, technischem Verstaendnis
|
||||
und der Faehigkeit, Probleme pragmatisch zu loesen.
|
||||
</div>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card primary">
|
||||
<div class="card-icon">🔧</div>
|
||||
<h3>Technik</h3>
|
||||
<p>Technisches Verstaendnis von der Mechanik bis zur Digitalisierung. Schnelle Auffassungsgabe fuer neue Systeme.</p>
|
||||
</div>
|
||||
<div class="card primary">
|
||||
<div class="card-icon">🤝</div>
|
||||
<h3>Teamwork</h3>
|
||||
<p>Zuverlaessig im Team, klar in der Kommunikation. Packt an wo es noetig ist.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">📐</div>
|
||||
<h3>Struktur</h3>
|
||||
<p>Organisiertes Arbeiten, saubere Prozesse. Auch unter Druck den Ueberblick behalten.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">💡</div>
|
||||
<h3>Problemloesung</h3>
|
||||
<p>Kreative Loesungen fuer praktische Probleme. Lieber machen als lange reden.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">🖨️</div>
|
||||
<h3>3D-Druck & CAD</h3>
|
||||
<p>Erfahrung in Design, Materialwahl und Fertigung. Vom digitalen Modell zum physischen Teil.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">📈</div>
|
||||
<h3>Lernbereitschaft</h3>
|
||||
<p>Staendig am Lernen, egal ob neue Software, neue Verfahren oder neue Herausforderungen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="teaser">
|
||||
<div>
|
||||
<div class="teaser-label">Side Project</div>
|
||||
<h3>s<span class="orange">MARTIN</span> 3D</h3>
|
||||
<p>
|
||||
Neben dem Beruf betreibt Martin einen eigenen 3D-Druck-Service.
|
||||
Prototypen, Kleinserien, Funktionsteile, Design-Objekte —
|
||||
smart gedacht, praezise gedruckt.
|
||||
</p>
|
||||
</div>
|
||||
<a href="https://smartin3.de" target="_blank" class="btn btn-orange">Zum 3D-Shop</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="kontakt" style="text-align: center; padding: 80px 0 120px;">
|
||||
<div class="container">
|
||||
<div class="section-label">Kontakt</div>
|
||||
<h2>Interesse?</h2>
|
||||
<div class="section-desc" style="margin: 0 auto 40px;">
|
||||
Berufliche Anfragen, Projektideen oder einfach Hallo sagen.
|
||||
</div>
|
||||
<div class="cta-group">
|
||||
<a href="mailto:martin_siebels@web.de" class="btn btn-primary">E-Mail schreiben</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>martinsiebels.de</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/martinsiebels.de/site.yaml
Normal file
4
sites/martinsiebels.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: martinsiebels.de
|
||||
template: custom
|
||||
title: "Martin Siebels — Profil"
|
||||
description: "Martin Siebels — Osnabrück. Berufliches Profil."
|
||||
BIN
sites/matthiasbreier.de/assets/portrait.jpg
Normal file
BIN
sites/matthiasbreier.de/assets/portrait.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
952
sites/matthiasbreier.de/index.html
Normal file
952
sites/matthiasbreier.de/index.html
Normal file
@@ -0,0 +1,952 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Matthias Breier — IT Projektmanager</title>
|
||||
<meta name="description" content="Matthias Breier — IT Projektmanager. Digitale Transformation, Agile Methoden, Strategische IT-Beratung.">
|
||||
<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=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--navy: #0a1628;
|
||||
--navy-light: #121f36;
|
||||
--navy-mid: #1a2d4a;
|
||||
--blue-dark: #1e3a5f;
|
||||
--teal: #00b4d8;
|
||||
--teal-light: #48cae4;
|
||||
--teal-glow: rgba(0, 180, 216, 0.15);
|
||||
--white: #ffffff;
|
||||
--off-white: #f0f4f8;
|
||||
--gray-light: #e2e8f0;
|
||||
--gray: #94a3b8;
|
||||
--gray-dark: #64748b;
|
||||
--text: #1e293b;
|
||||
--text-light: #cbd5e1;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: var(--text);
|
||||
line-height: 1.7;
|
||||
background: var(--white);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ===== NAV ===== */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(10, 22, 40, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(0, 180, 216, 0.1);
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 1.25rem;
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.nav-logo .ai-mark {
|
||||
color: var(--teal);
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--gray);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--teal-light);
|
||||
}
|
||||
|
||||
/* ===== HERO ===== */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 40%, var(--navy-mid) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 80%;
|
||||
height: 200%;
|
||||
background: radial-gradient(ellipse, rgba(0, 180, 216, 0.06) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.3), transparent);
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-label {
|
||||
display: inline-block;
|
||||
color: var(--teal);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.4rem 1rem;
|
||||
border: 1px solid rgba(0, 180, 216, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
color: var(--white);
|
||||
line-height: 1.15;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.ai-swap {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ai-swap .letter {
|
||||
display: inline-block;
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ai-swap .letter:first-child {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ai-swap .letter.hidden {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.ai-swap .letter.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#letterA.visible, #letterAI.visible {
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(1.125rem, 2vw, 1.5rem);
|
||||
color: var(--gray);
|
||||
font-weight: 300;
|
||||
margin-bottom: 2rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
color: var(--text-light);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
max-width: 480px;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.9rem 2rem;
|
||||
background: var(--teal);
|
||||
color: var(--navy);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.03em;
|
||||
border-radius: 3px;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.hero-cta:hover {
|
||||
background: var(--teal-light);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 24px rgba(0, 180, 216, 0.25);
|
||||
}
|
||||
|
||||
.hero-cta svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
|
||||
.hero-cta:hover svg {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.hero-image-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-image-frame {
|
||||
position: relative;
|
||||
width: 380px;
|
||||
height: 460px;
|
||||
}
|
||||
|
||||
.hero-image-frame::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
left: -8px;
|
||||
border: 1px solid rgba(0, 180, 216, 0.2);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hero-image-frame::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: -12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, var(--teal), rgba(0, 180, 216, 0.3));
|
||||
border-radius: 4px;
|
||||
z-index: -1;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
filter: grayscale(15%) contrast(1.05);
|
||||
}
|
||||
|
||||
/* ===== SECTIONS COMMON ===== */
|
||||
section {
|
||||
padding: 6rem 2rem;
|
||||
}
|
||||
|
||||
.section-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: inline-block;
|
||||
color: var(--teal);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
color: var(--navy);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
color: var(--gray-dark);
|
||||
font-size: 1.05rem;
|
||||
max-width: 600px;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* ===== ABOUT ===== */
|
||||
.about {
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
color: var(--gray-dark);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.85;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--off-white);
|
||||
padding: 1.5rem;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid var(--teal);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 2rem;
|
||||
color: var(--navy);
|
||||
line-height: 1;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--gray-dark);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.about-visual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
filter: grayscale(20%);
|
||||
}
|
||||
|
||||
.about-image-overlay {
|
||||
position: absolute;
|
||||
bottom: -1.5rem;
|
||||
left: -1.5rem;
|
||||
background: var(--navy);
|
||||
color: var(--white);
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 4px;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.about-image-overlay p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
font-style: italic;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.about-image-overlay .quote-mark {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 2.5rem;
|
||||
color: var(--teal);
|
||||
line-height: 1;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* ===== KOMPETENZEN ===== */
|
||||
.kompetenzen {
|
||||
background: var(--off-white);
|
||||
}
|
||||
|
||||
.kompetenz-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.kompetenz-card {
|
||||
background: var(--white);
|
||||
padding: 2rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--gray-light);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kompetenz-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--teal), var(--teal-light));
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.kompetenz-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.kompetenz-card:hover {
|
||||
border-color: rgba(0, 180, 216, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(10, 22, 40, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.kompetenz-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--teal-glow);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.kompetenz-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
.kompetenz-card h3 {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 1.15rem;
|
||||
color: var(--navy);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.kompetenz-card p {
|
||||
color: var(--gray-dark);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ===== METHODIK ===== */
|
||||
.methodik {
|
||||
background: var(--navy);
|
||||
color: var(--white);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.methodik::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.3), transparent);
|
||||
}
|
||||
|
||||
.methodik .section-label {
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
.methodik .section-title {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.methodik .section-subtitle {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.methodik-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.methodik-step {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.methodik-step:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(0, 180, 216, 0.2);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 3rem;
|
||||
color: rgba(0, 180, 216, 0.15);
|
||||
line-height: 1;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.methodik-step h3 {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.methodik-step p {
|
||||
color: var(--gray);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
/* ===== CONTACT ===== */
|
||||
.kontakt {
|
||||
background: var(--white);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.kontakt .section-inner {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.kontakt .section-title {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.kontakt-text {
|
||||
color: var(--gray-dark);
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.kontakt-email {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.15rem;
|
||||
color: var(--navy);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 1rem 2.5rem;
|
||||
border: 2px solid var(--navy);
|
||||
border-radius: 3px;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.kontakt-email:hover {
|
||||
background: var(--navy);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.kontakt-email svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.kontakt-meta {
|
||||
margin-top: 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.kontakt-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--gray-dark);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.kontakt-meta-item svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
footer {
|
||||
background: var(--navy);
|
||||
color: var(--gray);
|
||||
padding: 2.5rem 2rem;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
footer .footer-brand {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
color: var(--white);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
footer .footer-brand .ai-mark {
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
footer p {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-inner {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.hero-image-frame {
|
||||
width: 300px;
|
||||
height: 370px;
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.kompetenz-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.methodik-steps {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
section {
|
||||
padding: 4rem 1.25rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
padding: 3rem 1.25rem;
|
||||
}
|
||||
|
||||
.hero-image-frame {
|
||||
width: 260px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.kompetenz-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.methodik-steps {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-image-overlay {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
margin-top: 1rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.kontakt-meta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="#" class="nav-logo">Matthi<span class="ai-mark">A</span>s Bre<span class="ai-mark">I</span>er</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">Profil</a></li>
|
||||
<li><a href="#kompetenzen">Kompetenzen</a></li>
|
||||
<li><a href="#methodik">Methodik</a></li>
|
||||
<li><a href="#kontakt">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-inner">
|
||||
<div class="hero-text">
|
||||
<span class="hero-label">IT Projektmanagement</span>
|
||||
<h1 class="hero-name">Matthias<br>Br<span class="ai-swap"><span class="letter visible" id="letterE">e</span><span class="letter hidden" id="letterA">A</span></span><span class="ai-swap"><span class="letter visible" id="letterI">i</span><span class="letter hidden" id="letterAI">I</span></span>er</h1>
|
||||
<p class="hero-title">IT Projektmanager</p>
|
||||
<p class="hero-desc">
|
||||
Ich bringe Technologie und Strategie zusammen. Von der Konzeption bis zum Go-Live begleite ich digitale Projekte mit klarer Struktur, agilen Methoden und einem festen Blick auf messbare Ergebnisse.
|
||||
</p>
|
||||
<a href="#kontakt" class="hero-cta">
|
||||
Kontakt aufnehmen
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-image-wrap">
|
||||
<div class="hero-image-frame">
|
||||
<img src="portrait.jpg" alt="Matthias Breier — IT Projektmanager" class="hero-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section class="about" id="about">
|
||||
<div class="section-inner">
|
||||
<div class="about-grid">
|
||||
<div class="about-text">
|
||||
<span class="section-label">Profil</span>
|
||||
<h2 class="section-title">Erfahrung trifft Innovation</h2>
|
||||
<p>
|
||||
Als IT Projektmanager verbinde ich technisches Verständnis mit strategischem Weitblick. Mein Fokus liegt auf der erfolgreichen Umsetzung komplexer IT-Projekte — von der Anforderungsanalyse über die agile Steuerung bis zur termingerechten Lieferung.
|
||||
</p>
|
||||
<p>
|
||||
Ich arbeite an der Schnittstelle zwischen Fachbereichen und IT-Teams und sorge dafür, dass Projekte nicht nur technisch funktionieren, sondern echten Mehrwert für das Unternehmen schaffen. Dabei setze ich auf bewährte Frameworks, klare Kommunikation und datengetriebene Entscheidungen.
|
||||
</p>
|
||||
<div class="about-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">PM</div>
|
||||
<div class="stat-label">Klassisch & Agil</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">E2E</div>
|
||||
<div class="stat-label">End-to-End Delivery</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">KPI</div>
|
||||
<div class="stat-label">Ergebnisorientiert</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">360°</div>
|
||||
<div class="stat-label">Stakeholder Management</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-visual">
|
||||
<img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=600&h=500&fit=crop" alt="Digitale Zusammenarbeit" class="about-image">
|
||||
<div class="about-image-overlay">
|
||||
<div class="quote-mark">"</div>
|
||||
<p>Gute Projekte brauchen klare Strukturen und den Mut, sie anzupassen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KOMPETENZEN -->
|
||||
<section class="kompetenzen" id="kompetenzen">
|
||||
<div class="section-inner">
|
||||
<span class="section-label">Kompetenzen</span>
|
||||
<h2 class="section-title">Was ich mitbringe</h2>
|
||||
<p class="section-subtitle">
|
||||
Ein breites Kompetenzprofil an der Schnittstelle von Technologie, Organisation und Mensch.
|
||||
</p>
|
||||
<div class="kompetenz-grid">
|
||||
<div class="kompetenz-card">
|
||||
<div class="kompetenz-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
|
||||
</div>
|
||||
<h3>Projektmanagement</h3>
|
||||
<p>Planung, Steuerung und Kontrolle komplexer IT-Projekte. Von der Initialisierung bis zum erfolgreichen Abschluss.</p>
|
||||
</div>
|
||||
<div class="kompetenz-card">
|
||||
<div class="kompetenz-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" /></svg>
|
||||
</div>
|
||||
<h3>Agile / Scrum</h3>
|
||||
<p>Scrum, Kanban, SAFe — agile Methoden praxisnah eingesetzt. Iterativ, transparent und mit Fokus auf Wertschöpfung.</p>
|
||||
</div>
|
||||
<div class="kompetenz-card">
|
||||
<div class="kompetenz-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" /></svg>
|
||||
</div>
|
||||
<h3>IT-Strategie</h3>
|
||||
<p>Technologieentscheidungen mit Business-Zielen in Einklang bringen. IT-Roadmaps entwickeln und umsetzen.</p>
|
||||
</div>
|
||||
<div class="kompetenz-card">
|
||||
<div class="kompetenz-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" /></svg>
|
||||
</div>
|
||||
<h3>Digitale Transformation</h3>
|
||||
<p>Unternehmen auf dem Weg in die digitale Zukunft begleiten. Prozesse modernisieren, Teams befähigen.</p>
|
||||
</div>
|
||||
<div class="kompetenz-card">
|
||||
<div class="kompetenz-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
|
||||
</div>
|
||||
<h3>Stakeholder Management</h3>
|
||||
<p>Erwartungen managen, Interessen ausbalancieren, alle Beteiligten auf ein gemeinsames Ziel ausrichten.</p>
|
||||
</div>
|
||||
<div class="kompetenz-card">
|
||||
<div class="kompetenz-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" /></svg>
|
||||
</div>
|
||||
<h3>Change Management</h3>
|
||||
<p>Veränderung ist kein Nebeneffekt, sondern Kernkompetenz. Menschen mitnehmen, Widerstände adressieren.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- METHODIK -->
|
||||
<section class="methodik" id="methodik">
|
||||
<div class="section-inner">
|
||||
<span class="section-label">Methodik</span>
|
||||
<h2 class="section-title">Wie ich arbeite</h2>
|
||||
<p class="section-subtitle">
|
||||
Strukturiert, ergebnisorientiert und immer mit dem Menschen im Mittelpunkt.
|
||||
</p>
|
||||
<div class="methodik-steps">
|
||||
<div class="methodik-step">
|
||||
<div class="step-number">01</div>
|
||||
<h3>Verstehen</h3>
|
||||
<p>Jedes Projekt beginnt mit Zuhören. Ich erfasse den Kontext, identifiziere Stakeholder und definiere gemeinsam klare Ziele und Erfolgskriterien — bevor die erste Zeile Code geschrieben wird.</p>
|
||||
</div>
|
||||
<div class="methodik-step">
|
||||
<div class="step-number">02</div>
|
||||
<h3>Strukturieren</h3>
|
||||
<p>Komplexität wird handhabbar durch die richtige Struktur. Ich schaffe klare Verantwortlichkeiten, transparente Prozesse und passende Frameworks — ob Wasserfall, agil oder hybrid.</p>
|
||||
</div>
|
||||
<div class="methodik-step">
|
||||
<div class="step-number">03</div>
|
||||
<h3>Liefern</h3>
|
||||
<p>Ergebnisse zählen. Durch iteratives Vorgehen, konsequentes Risikomanagement und enge Abstimmung stelle ich sicher, dass Projekte termingerecht und in Qualität abgeschlossen werden.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIAL -->
|
||||
<section style="background: var(--navy); padding: 5rem 2rem; text-align: center;">
|
||||
<div style="max-width: 700px; margin: 0 auto;">
|
||||
<p style="font-family: 'DM Serif Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--light); font-style: italic; line-height: 1.5;">„Manchmal braucht man Breier.“</p>
|
||||
<div style="width: 40px; height: 2px; background: var(--teal); margin: 1.5rem auto;"></div>
|
||||
<p style="font-size: 0.85rem; color: var(--grey); letter-spacing: 0.1em;">— Zufriedener Kunde</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KONTAKT -->
|
||||
<section class="kontakt" id="kontakt">
|
||||
<div class="section-inner">
|
||||
<span class="section-label">Kontakt</span>
|
||||
<h2 class="section-title">Lassen Sie uns sprechen</h2>
|
||||
<p class="kontakt-text">
|
||||
Sie planen ein IT-Projekt oder suchen Unterstützung bei der digitalen Transformation?<br>
|
||||
Ich freue mich auf den Austausch.
|
||||
</p>
|
||||
<a href="mailto:kontakt@matthiasbreier.de" class="kontakt-email">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
|
||||
kontakt@matthiasbreier.de
|
||||
</a>
|
||||
<div class="kontakt-meta">
|
||||
<div class="kontakt-meta-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg>
|
||||
Deutschland
|
||||
</div>
|
||||
<div class="kontakt-meta-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
|
||||
IT Projektmanagement
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="footer-brand">Matthias Breier</div>
|
||||
<p>IT Projektmanagement</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const pairs = [
|
||||
[document.getElementById('letterE'), document.getElementById('letterA')],
|
||||
[document.getElementById('letterI'), document.getElementById('letterAI')]
|
||||
];
|
||||
setInterval(() => {
|
||||
pairs.forEach(([real, ai]) => {
|
||||
real.classList.toggle('visible');
|
||||
real.classList.toggle('hidden');
|
||||
ai.classList.toggle('visible');
|
||||
ai.classList.toggle('hidden');
|
||||
});
|
||||
}, 3000);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/matthiasbreier.de/site.yaml
Normal file
4
sites/matthiasbreier.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: matthiasbreier.de
|
||||
template: custom
|
||||
title: "Matthias Breier — IT Projektmanager"
|
||||
description: "Matthias Breier — IT Projektmanager. Digitale Transformation, Agile Methoden, Strategische IT-Beratung."
|
||||
271
sites/osterai.de/index.html
Normal file
271
sites/osterai.de/index.html
Normal file
@@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>oster🥚AI — Frohe Ostern!</title>
|
||||
<meta name="description" content="osterAI — Frohe Ostern mit einer Prise künstlicher Intelligenz.">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐣</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #fffdf7;
|
||||
--bg-card: #fff8eb;
|
||||
--border: rgba(180, 140, 60, 0.12);
|
||||
--text: #3a3020;
|
||||
--text-soft: #6b5e48;
|
||||
--text-faint: #a89878;
|
||||
--accent: #e8a030;
|
||||
--accent-soft: rgba(232, 160, 48, 0.12);
|
||||
--green: #6aad50;
|
||||
--green-soft: rgba(106, 173, 80, 0.1);
|
||||
--pink: #e87088;
|
||||
--pink-soft: rgba(232, 112, 136, 0.1);
|
||||
--blue: #5898d0;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Newsreader', Georgia, serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.8;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.page {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 100px 24px 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Floating eggs */
|
||||
.eggs {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 40px;
|
||||
letter-spacing: 0.3em;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Newsreader', Georgia, serif;
|
||||
font-size: clamp(2.4rem, 5vw, 3.2rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1 .ai { color: var(--accent); font-weight: 600; }
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-soft);
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.rule {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
margin: 0 auto 48px;
|
||||
opacity: 0.4;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.prose {
|
||||
margin-bottom: 48px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-soft);
|
||||
font-weight: 300;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.prose em { color: var(--text); font-style: italic; }
|
||||
|
||||
/* Easter eggs grid */
|
||||
.egg-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
margin: 48px 0;
|
||||
}
|
||||
|
||||
.egg-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.egg-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(180, 140, 60, 0.08);
|
||||
}
|
||||
|
||||
.egg-card:nth-child(1) { background: var(--accent-soft); }
|
||||
.egg-card:nth-child(2) { background: var(--green-soft); }
|
||||
.egg-card:nth-child(3) { background: var(--pink-soft); }
|
||||
|
||||
.egg-emoji { font-size: 2rem; margin-bottom: 10px; }
|
||||
|
||||
.egg-card h3 {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.egg-card p {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-faint);
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: var(--accent-soft);
|
||||
padding: 24px 28px;
|
||||
border-radius: 14px;
|
||||
border-left: 3px solid var(--accent);
|
||||
margin: 48px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.highlight p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-soft);
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.closing {
|
||||
margin-top: 56px;
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 64px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-faint);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
footer .ai { color: var(--accent); font-weight: 500; }
|
||||
|
||||
/* Entrance */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.page > * {
|
||||
animation: fadeUp 0.8s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.page > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.page > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.page > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.page > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.page > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
.page > *:nth-child(6) { animation-delay: 1.1s; }
|
||||
.page > *:nth-child(7) { animation-delay: 1.3s; }
|
||||
.page > *:nth-child(8) { animation-delay: 1.5s; }
|
||||
.page > *:nth-child(9) { animation-delay: 1.7s; }
|
||||
.page > *:nth-child(10) { animation-delay: 1.9s; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.egg-grid { grid-template-columns: 1fr; }
|
||||
.page { padding: 60px 20px 60px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page">
|
||||
|
||||
<div class="eggs">🥚 🐣 🥚</div>
|
||||
|
||||
<h1>oster<span class="ai">AI</span></h1>
|
||||
<p class="subtitle">Frohe Ostern — mit einer Prise KI.</p>
|
||||
|
||||
<div class="rule"></div>
|
||||
|
||||
<div class="prose">
|
||||
<p>
|
||||
Ostern ist das Fest der Überraschungen. Versteckte Eier,
|
||||
unerwartete Begegnungen, und die leise Ahnung, dass nach
|
||||
dem Winter <em>immer etwas Neues kommt</em>.
|
||||
</p>
|
||||
<p>
|
||||
In diesem Jahr haben wir ein paar digitale Ostereier versteckt.
|
||||
Keine Schokolade — aber vielleicht eine Idee, ein Lächeln,
|
||||
oder ein kleiner Moment der Ruhe.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="egg-grid">
|
||||
<div class="egg-card">
|
||||
<div class="egg-emoji">🌱</div>
|
||||
<h3>Neuanfang</h3>
|
||||
<p>Jeder Frühling ist ein Proof of Concept.</p>
|
||||
</div>
|
||||
<div class="egg-card">
|
||||
<div class="egg-emoji">🐰</div>
|
||||
<h3>Geduld</h3>
|
||||
<p>Manche Eier brauchen Zeit zum Finden.</p>
|
||||
</div>
|
||||
<div class="egg-card">
|
||||
<div class="egg-emoji">✨</div>
|
||||
<h3>Überraschung</h3>
|
||||
<p>Die besten Dinge kommen unerwartet.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight">
|
||||
<p>
|
||||
„Die Zukunft gehört denen, die an die Schönheit ihrer
|
||||
Ostereier glauben." — frei nach Eleanor Roosevelt,
|
||||
wahrscheinlich.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="closing">🐣</div>
|
||||
|
||||
<footer>
|
||||
<p>oster<span class="ai">AI</span>.de — Frohe Ostern 2026</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/osterai.de/site.yaml
Normal file
4
sites/osterai.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: osterai.de
|
||||
template: custom
|
||||
title: "oster🥚AI — Frohe Ostern!"
|
||||
description: "osterAI — Frohe Ostern mit einer Prise künstlicher Intelligenz."
|
||||
732
sites/paragraphenraiter.de/index.html
Normal file
732
sites/paragraphenraiter.de/index.html
Normal file
@@ -0,0 +1,732 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ParagraphenrAIter — KI trifft Jura</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--gold: #c9a84c;
|
||||
--gold-light: #e8d48b;
|
||||
--gold-dim: #8a7235;
|
||||
--dark: #0a0a0f;
|
||||
--dark-surface: #12121a;
|
||||
--dark-card: #1a1a26;
|
||||
--dark-border: #2a2a3a;
|
||||
--text: #e8e6e1;
|
||||
--text-dim: #8a8a9a;
|
||||
--accent-blue: #4a6fa5;
|
||||
--accent-red: #8b3a3a;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--dark);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* === HERO === */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201, 168, 76, 0.06) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 40% 40% at 20% 80%, rgba(74, 111, 165, 0.04) 0%, transparent 60%),
|
||||
var(--dark);
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 100px,
|
||||
rgba(201, 168, 76, 0.015) 100px,
|
||||
rgba(201, 168, 76, 0.015) 101px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 100px,
|
||||
rgba(201, 168, 76, 0.015) 100px,
|
||||
rgba(201, 168, 76, 0.015) 101px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.paragraph-symbol {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(6rem, 15vw, 12rem);
|
||||
font-weight: 900;
|
||||
color: var(--gold);
|
||||
line-height: 1;
|
||||
margin-bottom: -0.5rem;
|
||||
text-shadow:
|
||||
0 0 80px rgba(201, 168, 76, 0.3),
|
||||
0 0 160px rgba(201, 168, 76, 0.1);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.paragraph-symbol::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0.15em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(2.2rem, 6vw, 4.5rem);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.brand-name .ai-highlight {
|
||||
color: var(--gold);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.brand-name .ai-highlight::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0.05em;
|
||||
left: -0.05em;
|
||||
right: -0.05em;
|
||||
height: 0.35em;
|
||||
background: rgba(201, 168, 76, 0.15);
|
||||
z-index: -1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: clamp(0.85rem, 2vw, 1.1rem);
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
margin: 1.5rem 0 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: clamp(1rem, 2.5vw, 1.35rem);
|
||||
color: var(--text-dim);
|
||||
max-width: 600px;
|
||||
margin: 0 auto 3rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.subtitle strong {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.scroll-hint {
|
||||
position: absolute;
|
||||
bottom: 2.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.scroll-hint .chevron {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-right: 1.5px solid var(--gold-dim);
|
||||
border-bottom: 1.5px solid var(--gold-dim);
|
||||
transform: rotate(45deg);
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); }
|
||||
40% { transform: rotate(45deg) translateY(6px); }
|
||||
60% { transform: rotate(45deg) translateY(3px); }
|
||||
}
|
||||
|
||||
/* === DIVIDER === */
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0 2rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.divider::before, .divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--dark-border));
|
||||
}
|
||||
|
||||
.divider::after {
|
||||
background: linear-gradient(90deg, var(--dark-border), transparent);
|
||||
}
|
||||
|
||||
.divider span {
|
||||
color: var(--gold-dim);
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* === MANIFESTO === */
|
||||
.manifesto {
|
||||
padding: 6rem 2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.manifesto-text {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(1.4rem, 3vw, 2rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.8;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.manifesto-text em {
|
||||
color: var(--gold);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* === FEATURES === */
|
||||
.features {
|
||||
padding: 4rem 2rem 6rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
color: var(--text-dim);
|
||||
font-size: 1rem;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--dark-surface);
|
||||
border: 1px solid var(--dark-border);
|
||||
border-radius: 12px;
|
||||
padding: 2.5rem 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: var(--gold-dim);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.feature-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.25rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* === KNIGHT SECTION === */
|
||||
.knight-section {
|
||||
padding: 5rem 2rem;
|
||||
background: var(--dark-surface);
|
||||
border-top: 1px solid var(--dark-border);
|
||||
border-bottom: 1px solid var(--dark-border);
|
||||
}
|
||||
|
||||
.knight-content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.knight-emblem {
|
||||
font-size: clamp(4rem, 10vw, 7rem);
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.knight-emblem .shield {
|
||||
position: relative;
|
||||
width: clamp(100px, 20vw, 160px);
|
||||
height: clamp(120px, 24vw, 192px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.knight-emblem .shield svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.knight-emblem .shield-symbol {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 900;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.knight-text h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.knight-text h2 span {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.knight-text p {
|
||||
color: var(--text-dim);
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.knight-text .oath {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-style: italic;
|
||||
color: var(--gold-dim);
|
||||
font-size: 1.1rem;
|
||||
border-left: 2px solid var(--gold-dim);
|
||||
padding-left: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* === APPROACH SECTION === */
|
||||
.approach {
|
||||
padding: 6rem 2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.approach-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.approach-list li {
|
||||
display: grid;
|
||||
grid-template-columns: 3rem 1fr;
|
||||
gap: 1.5rem;
|
||||
padding: 1.75rem 0;
|
||||
border-bottom: 1px solid var(--dark-border);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.approach-list li:first-child {
|
||||
border-top: 1px solid var(--dark-border);
|
||||
}
|
||||
|
||||
.approach-number {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--gold);
|
||||
font-weight: 500;
|
||||
padding-top: 0.15rem;
|
||||
}
|
||||
|
||||
.approach-list h3 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.approach-list p {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* === CTA === */
|
||||
.cta {
|
||||
padding: 6rem 2rem;
|
||||
text-align: center;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(201, 168, 76, 0.04) 0%, transparent 70%),
|
||||
var(--dark);
|
||||
}
|
||||
|
||||
.cta h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 900;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta h2 span {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.cta p {
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 2.5rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
padding: 1rem 2.5rem;
|
||||
background: transparent;
|
||||
color: var(--gold);
|
||||
border: 1.5px solid var(--gold);
|
||||
border-radius: 4px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background: var(--gold);
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
footer {
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--dark-border);
|
||||
background: var(--dark-surface);
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.footer-brand span {
|
||||
color: var(--gold-dim);
|
||||
}
|
||||
|
||||
.footer-credit {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.4;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 768px) {
|
||||
.knight-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.knight-emblem {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.knight-text .oath {
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--gold-dim);
|
||||
padding-left: 0;
|
||||
padding-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.approach-list li {
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="paragraph-symbol">§</div>
|
||||
<h1 class="brand-name">Paragraphen<wbr>r<span class="ai-highlight">AI</span>ter</h1>
|
||||
<p class="tagline">Recht. Aber schlauer.</p>
|
||||
<p class="subtitle">
|
||||
Wo <strong>juristische Präzision</strong> auf <strong>künstliche Intelligenz</strong> trifft.
|
||||
Kein Buzzword-Bingo — echte Werkzeuge für die Rechtspraxis von morgen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="scroll-hint">
|
||||
<span>Weiter</span>
|
||||
<div class="chevron"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="divider"><span>§</span></div>
|
||||
|
||||
<!-- MANIFESTO -->
|
||||
<section class="manifesto">
|
||||
<p class="manifesto-text">
|
||||
Juristen reiten Paragraphen seit Jahrhunderten.<br>
|
||||
Wir reiten sie jetzt <em>schneller, präziser — und mit KI im Sattel.</em>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="divider"><span>§</span></div>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section class="features">
|
||||
<div class="section-header">
|
||||
<h2>Was der Ritter im Schilde führt</h2>
|
||||
<p>KI-gestützte Werkzeuge, die juristische Arbeit transformieren</p>
|
||||
</div>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">§</span>
|
||||
<h3>Intelligente Recherche</h3>
|
||||
<p>Rechtsprechung, Literatur und Gesetzestexte in Sekunden durchsucht, verknüpft und aufbereitet. Nicht googeln — finden.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">⚔</span>
|
||||
<h3>Schriftsatz-Analyse</h3>
|
||||
<p>KI-gestützte Prüfung von Argumentationslinien, Widerspruchserkennung und automatische Gegenüberstellung.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">🛡</span>
|
||||
<h3>Vertragsintelligenz</h3>
|
||||
<p>Klauseln verstehen, Risiken erkennen, Konsistenz prüfen. Ihr Vertrag, durchleuchtet von Algorithmen mit juristischem Verstand.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">⚖</span>
|
||||
<h3>Patentrecht & UPC</h3>
|
||||
<p>Spezialisiert auf das Einheitliche Patentgericht. Entscheidungsanalyse, Fristenüberwachung, strategische Auswertung.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">⚡</span>
|
||||
<h3>Workflow-Automatisierung</h3>
|
||||
<p>Wiederkehrende Aufgaben, Fristenkontrolle, Dokumentenmanagement — automatisiert, aber unter Ihrer Kontrolle.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">🧠</span>
|
||||
<h3>Wissensmanagement</h3>
|
||||
<p>Mandatswissen, das wächst und lernt. Nie wieder „Das hatten wir doch schon mal“.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KNIGHT SECTION -->
|
||||
<section class="knight-section">
|
||||
<div class="knight-content">
|
||||
<div class="knight-emblem">
|
||||
<div class="shield">
|
||||
<svg viewBox="0 0 160 192" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M80 4 L156 40 L156 100 Q156 155 80 188 Q4 155 4 100 L4 40 Z"
|
||||
stroke="#c9a84c" stroke-width="1.5" fill="none" opacity="0.4"/>
|
||||
<path d="M80 12 L148 44 L148 98 Q148 148 80 180 Q12 148 12 98 L12 44 Z"
|
||||
stroke="#c9a84c" stroke-width="0.5" fill="rgba(201, 168, 76, 0.03)" opacity="0.6"/>
|
||||
</svg>
|
||||
<span class="shield-symbol">§</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="knight-text">
|
||||
<h2>Der <span>Ritter</span> des Rechts</h2>
|
||||
<p>
|
||||
Der Paragraphenreiter war schon immer der, den man rief, wenn es auf jedes Wort ankam.
|
||||
Pedantisch? Vielleicht. Aber in der Rechtswelt ist Pedanterie eine Tugend.
|
||||
</p>
|
||||
<p>
|
||||
Der Paragraphenr<strong style="color: var(--gold)">AI</strong>ter behält diese Tugend —
|
||||
und rüstet sie auf. Mit Algorithmen, die in Millisekunden leisten,
|
||||
wofür früher Stunden nötig waren. Der Ritter trägt jetzt Rüstung aus Daten.
|
||||
</p>
|
||||
<p class="oath">
|
||||
„Wir streiten nicht um des Streitens willen —<br>
|
||||
wir streiten, um Recht zu schaffen.“
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- APPROACH -->
|
||||
<section class="approach">
|
||||
<div class="section-header">
|
||||
<h2>Unser Ansatz</h2>
|
||||
<p>KI ist das Werkzeug. Der Jurist bleibt der Meister.</p>
|
||||
</div>
|
||||
<ul class="approach-list">
|
||||
<li>
|
||||
<span class="approach-number">01</span>
|
||||
<div>
|
||||
<h3>Mensch vor Maschine</h3>
|
||||
<p>KI ersetzt keine Juristen. Sie befreit sie von dem, was Maschinen besser können — damit Menschen das tun, was nur sie können: urteilen, beraten, entscheiden.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="approach-number">02</span>
|
||||
<div>
|
||||
<h3>Präzision, keine Halluzination</h3>
|
||||
<p>Jede Quelle nachvollziehbar. Jede Aussage belegbar. Wir bauen Werkzeuge, die Juristen vertrauen können — nicht solche, die man überprüfen muss.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="approach-number">03</span>
|
||||
<div>
|
||||
<h3>Datenschutz als Grundrecht</h3>
|
||||
<p>Mandantendaten gehören Mandanten. Punkt. Keine Cloud-Experimente mit sensiblen Akten. Souveräne Infrastruktur, europäische Standards.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="approach-number">04</span>
|
||||
<div>
|
||||
<h3>Gebaut von Juristen, für Juristen</h3>
|
||||
<p>Kein Silicon-Valley-Produkt, das Jura „auch kann“. Sondern Werkzeuge von jemandem, der weiß, wie ein Schriftsatz um 23 Uhr aussieht.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta">
|
||||
<h2>Bereit für den <span>R<span style="font-size: 0.85em;">AI</span>ter</span>?</h2>
|
||||
<p>Kommen Sie ins Gespräch. Unverbindlich, aber nicht unverbindend.</p>
|
||||
<a href="mailto:mail@msbls.de" class="cta-button">Kontakt aufnehmen</a>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p class="footer-brand">Paragraphen<span>rAI</span>ter</p>
|
||||
<p class="footer-credit">Ein Projekt von Matthias Flexsiebels</p>
|
||||
<p class="footer-legal">© 2026 · Recht. Aber schlauer.</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/paragraphenraiter.de/site.yaml
Normal file
4
sites/paragraphenraiter.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: paragraphenraiter.de
|
||||
template: custom
|
||||
title: "ParagraphenrAIter — KI trifft Jura"
|
||||
description: ""
|
||||
60
sites/schulfrai.de/index.html
Normal file
60
sites/schulfrai.de/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>schulfrAI.</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎓</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--bg: #0a0a0c; --text: #e8e8ed; --text-dim: #6e6e7a; --text-muted: #44444f;
|
||||
--accent: #e8a838; --accent-glow: rgba(232, 168, 56, 0.15);
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg); color: var(--text);
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body::before {
|
||||
content: ''; position: fixed; inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none; z-index: 9999;
|
||||
}
|
||||
.container { text-align: center; padding: 2rem; max-width: 700px; }
|
||||
.icon { font-size: 4rem; margin-bottom: 32px; }
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 700;
|
||||
letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 24px;
|
||||
}
|
||||
h1 .accent { color: var(--accent); }
|
||||
.divider { width: 60px; height: 2px; background: var(--accent); margin: 0 auto 32px; opacity: 0.5; }
|
||||
.subtitle {
|
||||
font-size: 1.15rem; color: var(--text-dim); font-weight: 300;
|
||||
line-height: 1.7; max-width: 520px; margin: 0 auto 48px;
|
||||
}
|
||||
.footer { margin-top: 64px; font-size: 0.72rem; color: var(--text-muted); }
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.container > * { animation: fadeIn 0.8s ease forwards; opacity: 0; }
|
||||
.container > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.container > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.container > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.container > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.container > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="icon">🎓</div>
|
||||
<h1>schul<span class='accent'>frAI</span>.</h1>
|
||||
<div class="divider"></div>
|
||||
<p class="subtitle">Lernen ohne Grenzen.</p>
|
||||
<p class="footer">schulfrAI.de</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/schulfrai.de/site.yaml
Normal file
4
sites/schulfrai.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: schulfrai.de
|
||||
template: custom
|
||||
title: "schulfrAI."
|
||||
description: ""
|
||||
448
sites/smartin3.de/index.html
Normal file
448
sites/smartin3.de/index.html
Normal file
@@ -0,0 +1,448 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>sMARTin 3D — Smart in 3D</title>
|
||||
<meta name="description" content="sMARTin 3D — Dein 3D-Druck-Shop. Individuelle Teile, Prototypen, Kleinserien. Smart gedacht, praezise gedruckt.">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧊</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--bg-elevated: #111115;
|
||||
--bg-card: #16161b;
|
||||
--border: #1e1e26;
|
||||
--text: #e8e8ed;
|
||||
--text-dim: #6e6e7a;
|
||||
--text-muted: #44444f;
|
||||
--orange: #f97316;
|
||||
--orange-glow: rgba(249, 115, 22, 0.2);
|
||||
--orange-subtle: rgba(249, 115, 22, 0.08);
|
||||
--blue: #38bdf8;
|
||||
--blue-glow: rgba(56, 189, 248, 0.15);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
/* Nav */
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 20px 0;
|
||||
background: rgba(10, 10, 12, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 600; }
|
||||
.logo .s { color: var(--text-dim); font-weight: 300; text-transform: lowercase; }
|
||||
.logo .martin { color: var(--orange); }
|
||||
.logo .three { color: var(--blue); font-weight: 700; }
|
||||
.logo .d { color: var(--text); }
|
||||
nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
|
||||
nav a:hover { color: var(--text); }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 180px 0 120px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 60px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 700px; height: 500px;
|
||||
background:
|
||||
radial-gradient(ellipse at 40% 50%, var(--orange-glow) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 60% 40%, var(--blue-glow) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 3D cube animation */
|
||||
.cube-wrapper {
|
||||
perspective: 600px;
|
||||
width: 80px; height: 80px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.cube {
|
||||
width: 80px; height: 80px;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
animation: rotateCube 12s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotateCube {
|
||||
from { transform: rotateX(-20deg) rotateY(0deg); }
|
||||
to { transform: rotateX(-20deg) rotateY(360deg); }
|
||||
}
|
||||
|
||||
.cube-face {
|
||||
position: absolute;
|
||||
width: 80px; height: 80px;
|
||||
border: 1px solid var(--orange);
|
||||
background: rgba(249, 115, 22, 0.04);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cube-face:nth-child(1) { transform: translateZ(40px); }
|
||||
.cube-face:nth-child(2) { transform: rotateY(180deg) translateZ(40px); }
|
||||
.cube-face:nth-child(3) { transform: rotateY(90deg) translateZ(40px); }
|
||||
.cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(40px); }
|
||||
.cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(40px); }
|
||||
.cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(40px); }
|
||||
|
||||
h1 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: clamp(2.8rem, 6vw, 4.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 .s { color: var(--text-dim); font-weight: 300; }
|
||||
h1 .martin { color: var(--orange); }
|
||||
h1 .three { color: var(--blue); }
|
||||
|
||||
.tagline {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-dim);
|
||||
max-width: 540px;
|
||||
margin: 0 auto 48px;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.hero-desc strong { color: var(--text); font-weight: 500; }
|
||||
|
||||
.cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 14px 28px; border-radius: 10px;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 0.9rem; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.2s; border: none; cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--orange); color: #fff;
|
||||
box-shadow: 0 0 30px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 50px var(--orange-glow);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
|
||||
.btn-ghost:hover { color: var(--text); border-color: #2a2a35; background: var(--bg-elevated); }
|
||||
|
||||
/* Sections */
|
||||
section { padding: 100px 0; }
|
||||
.section-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }
|
||||
h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 16px; }
|
||||
.section-desc { color: var(--text-dim); font-size: 1rem; max-width: 520px; margin-bottom: 56px; font-weight: 300; line-height: 1.7; }
|
||||
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), var(--orange), var(--border), transparent); max-width: 860px; margin: 0 auto; }
|
||||
|
||||
/* Services */
|
||||
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
|
||||
.service-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 14px; padding: 32px;
|
||||
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
|
||||
}
|
||||
.service-card:hover {
|
||||
border-color: var(--orange);
|
||||
box-shadow: 0 0 30px rgba(249, 115, 22, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.service-icon { font-size: 1.8rem; margin-bottom: 16px; }
|
||||
.service-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; }
|
||||
.service-card p { color: var(--text-dim); font-size: 0.84rem; line-height: 1.6; font-weight: 300; }
|
||||
|
||||
/* Process */
|
||||
.process-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.process-step { position: relative; }
|
||||
|
||||
.process-num {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 2rem; font-weight: 700;
|
||||
color: var(--orange); opacity: 0.3;
|
||||
line-height: 1; margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.process-step h3 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 0.85rem; font-weight: 600; margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.process-step p {
|
||||
color: var(--text-dim); font-size: 0.8rem; font-weight: 300; line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Materials */
|
||||
.material-tags {
|
||||
display: flex; gap: 10px; flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.material-tag {
|
||||
padding: 8px 18px;
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 0.8rem; font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.material-tag:hover { border-color: var(--orange); color: var(--orange); }
|
||||
|
||||
/* CTA */
|
||||
.cta-section { text-align: center; padding: 80px 0 120px; }
|
||||
.cta-section h2 { margin-bottom: 12px; }
|
||||
.cta-section .section-desc { margin: 0 auto 40px; }
|
||||
|
||||
footer { padding: 40px 0; text-align: center; border-top: 1px solid var(--border); }
|
||||
footer p { font-family: 'Space Grotesk', sans-serif; color: var(--text-muted); font-size: 0.75rem; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.services-grid { grid-template-columns: 1fr; }
|
||||
.process-steps { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.hero { padding: 140px 0 80px; }
|
||||
section { padding: 64px 0; }
|
||||
.process-steps { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo"><span class="s">s</span><span class="martin">MARTIN</span> <span class="three">3</span><span class="d">D</span></div>
|
||||
<a href="#kontakt">Anfrage</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="cube-wrapper">
|
||||
<div class="cube">
|
||||
<div class="cube-face"></div>
|
||||
<div class="cube-face"></div>
|
||||
<div class="cube-face"></div>
|
||||
<div class="cube-face"></div>
|
||||
<div class="cube-face"></div>
|
||||
<div class="cube-face"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1><span class="s">s</span><span class="martin">MARTIN</span> <span class="three">3</span>D</h1>
|
||||
<div class="tagline">Smart in 3D</div>
|
||||
|
||||
<p class="hero-desc">
|
||||
<strong>3D-Druck</strong> fuer Ideen, die nicht warten koennen.
|
||||
Vom Prototyp bis zur Kleinserie — praezise, schnell und genau so,
|
||||
wie du es brauchst.
|
||||
</p>
|
||||
|
||||
<div class="cta-group">
|
||||
<a href="#kontakt" class="btn btn-primary">Projekt anfragen</a>
|
||||
<a href="#services" class="btn btn-ghost">Leistungen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="services">
|
||||
<div class="container">
|
||||
<div class="section-label">Leistungen</div>
|
||||
<h2>Was wir drucken.</h2>
|
||||
<div class="section-desc">
|
||||
Egal ob Einzelstueck oder Serie — jedes Teil wird individuell
|
||||
fuer deinen Anwendungsfall optimiert.
|
||||
</div>
|
||||
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<div class="service-icon">🔩</div>
|
||||
<h3>Prototypen</h3>
|
||||
<p>Von der Idee zum Anfassen. Schnelle Iterationen, funktionale Tests, Design-Validierung.</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">📦</div>
|
||||
<h3>Kleinserien</h3>
|
||||
<p>10 bis 500 Stueck. Ohne Werkzeugkosten, ohne Mindestmengen, ohne Wartezeit.</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">⚙️</div>
|
||||
<h3>Funktionsteile</h3>
|
||||
<p>Mechanisch belastbar, massgenau, einsatzbereit. Fuer Maschinen, Geraete, Anlagen.</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">🎨</div>
|
||||
<h3>Design-Objekte</h3>
|
||||
<p>Architekturmodelle, Figuren, Kunst. Detailreich und in verschiedenen Materialien.</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">🔧</div>
|
||||
<h3>Ersatzteile</h3>
|
||||
<p>Das Teil gibt's nicht mehr? Wir drucken es nach. Reverse Engineering inklusive.</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">💡</div>
|
||||
<h3>Beratung</h3>
|
||||
<p>Welches Material? Welches Verfahren? Wir helfen bei der Entscheidung — bevor gedruckt wird.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">Prozess</div>
|
||||
<h2>In 4 Schritten zum Teil.</h2>
|
||||
<div class="section-desc">
|
||||
Kein komplizierter Bestellprozess. Schick uns dein Modell oder deine Idee —
|
||||
wir kuemmern uns um den Rest.
|
||||
</div>
|
||||
|
||||
<div class="process-steps">
|
||||
<div class="process-step">
|
||||
<div class="process-num">01</div>
|
||||
<h3>Anfrage</h3>
|
||||
<p>3D-Datei oder Skizze schicken. Wir beraten bei Material und Verfahren.</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="process-num">02</div>
|
||||
<h3>Angebot</h3>
|
||||
<p>Transparente Preise. Keine versteckten Kosten. Innerhalb von 24h.</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="process-num">03</div>
|
||||
<h3>Druck</h3>
|
||||
<p>Produktion auf professionellen Druckern. Qualitaetskontrolle bei jedem Teil.</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="process-num">04</div>
|
||||
<h3>Versand</h3>
|
||||
<p>Sicher verpackt, schnell geliefert. Oder Abholung vor Ort.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">Materialien</div>
|
||||
<h2>Was wir verarbeiten.</h2>
|
||||
<div class="section-desc">
|
||||
Verschiedene Materialien fuer verschiedene Anforderungen.
|
||||
</div>
|
||||
|
||||
<div class="material-tags">
|
||||
<span class="material-tag">PLA</span>
|
||||
<span class="material-tag">PETG</span>
|
||||
<span class="material-tag">ABS</span>
|
||||
<span class="material-tag">TPU (flexibel)</span>
|
||||
<span class="material-tag">Nylon</span>
|
||||
<span class="material-tag">ASA (UV-bestaendig)</span>
|
||||
<span class="material-tag">Carbon-Verbund</span>
|
||||
<span class="material-tag">Holz-Filament</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="kontakt" class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-label">Kontakt</div>
|
||||
<h2>Idee? Her damit.</h2>
|
||||
<div class="section-desc">
|
||||
Schick uns dein 3D-Modell, eine Skizze oder einfach eine Beschreibung.
|
||||
Wir melden uns innerhalb von 24 Stunden.
|
||||
</div>
|
||||
<a href="mailto:smartin3d@msbls.de" class="btn btn-primary">Projekt anfragen</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><span style="color:var(--text-dim)">s</span><span style="color:var(--orange)">MARTIN</span> <span style="color:var(--blue)">3</span>D — smartin3.de</p>
|
||||
<p style="margin-top: 24px; font-size: 0.65rem; color: var(--text-muted); line-height: 1.8;"><a href="#impressum" style="color: var(--text-muted); text-decoration: none;">Impressum</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<section id="impressum" style="padding: 60px 0 80px; border-top: 1px solid var(--border);">
|
||||
<div class="container" style="max-width: 540px;">
|
||||
<h2 style="font-size: 1.2rem; margin-bottom: 24px;">Impressum</h2>
|
||||
<p style="font-size: 0.85rem; color: var(--text-dim); line-height: 1.8; font-weight: 300;">
|
||||
Martin Siebels<br>
|
||||
Leyer Str. 38<br>
|
||||
49076 Osnabrück<br><br>
|
||||
E-Mail: <a href="mailto:Martin_Siebels@web.de" style="color: var(--orange); text-decoration: none;">Martin_Siebels@web.de</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/smartin3.de/site.yaml
Normal file
4
sites/smartin3.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: smartin3.de
|
||||
template: custom
|
||||
title: "sMARTin 3D — Smart in 3D"
|
||||
description: "sMARTin 3D — Dein 3D-Druck-Shop. Individuelle Teile, Prototypen, Kleinserien. Smart gedacht, praezise gedruckt."
|
||||
60
sites/sorgenfrai.de/index.html
Normal file
60
sites/sorgenfrai.de/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>sorgenfrAI.</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧘</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--bg: #0a0a0c; --text: #e8e8ed; --text-dim: #6e6e7a; --text-muted: #44444f;
|
||||
--accent: #7c9885; --accent-glow: rgba(124, 152, 133, 0.15);
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg); color: var(--text);
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body::before {
|
||||
content: ''; position: fixed; inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none; z-index: 9999;
|
||||
}
|
||||
.container { text-align: center; padding: 2rem; max-width: 700px; }
|
||||
.icon { font-size: 4rem; margin-bottom: 32px; }
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 700;
|
||||
letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 24px;
|
||||
}
|
||||
h1 .accent { color: var(--accent); }
|
||||
.divider { width: 60px; height: 2px; background: var(--accent); margin: 0 auto 32px; opacity: 0.5; }
|
||||
.subtitle {
|
||||
font-size: 1.15rem; color: var(--text-dim); font-weight: 300;
|
||||
line-height: 1.7; max-width: 520px; margin: 0 auto 48px;
|
||||
}
|
||||
.footer { margin-top: 64px; font-size: 0.72rem; color: var(--text-muted); }
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.container > * { animation: fadeIn 0.8s ease forwards; opacity: 0; }
|
||||
.container > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.container > *:nth-child(2) { animation-delay: 0.3s; }
|
||||
.container > *:nth-child(3) { animation-delay: 0.5s; }
|
||||
.container > *:nth-child(4) { animation-delay: 0.7s; }
|
||||
.container > *:nth-child(5) { animation-delay: 0.9s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="icon">🧘</div>
|
||||
<h1>sorgen<span class='accent'>frAI</span>.</h1>
|
||||
<div class="divider"></div>
|
||||
<p class="subtitle">Deine Sorgen. Unsere AI.</p>
|
||||
<p class="footer">sorgenfrAI.de</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/sorgenfrai.de/site.yaml
Normal file
4
sites/sorgenfrai.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: sorgenfrai.de
|
||||
template: custom
|
||||
title: "sorgenfrAI."
|
||||
description: ""
|
||||
686
sites/vonschraitter.de/index.html
Normal file
686
sites/vonschraitter.de/index.html
Normal file
@@ -0,0 +1,686 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Florian von Schreitter — Kartellrecht</title>
|
||||
<meta name="description" content="Florian von Schreitter — Kartellrechtsspezialist bei Hogan Lovells. Fusionskontrolle, Kartellverfahren, Compliance.">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>F</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--bg-elevated: #111115;
|
||||
--bg-card: #16161b;
|
||||
--border: #1e1e26;
|
||||
--text: #e8e8ed;
|
||||
--text-dim: #6e6e7a;
|
||||
--text-muted: #44444f;
|
||||
--accent: #c9a84c;
|
||||
--accent-glow: rgba(201, 168, 76, 0.15);
|
||||
--accent-subtle: rgba(201, 168, 76, 0.08);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- Grain overlay --- */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* --- Layout --- */
|
||||
.container {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* --- Nav --- */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 20px 0;
|
||||
background: rgba(10, 10, 12, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
nav .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.logo .accent {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* --- Hero --- */
|
||||
.hero {
|
||||
padding: 180px 0 120px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 32px;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.hero-badge .dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 0 8px var(--accent-glow);
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.monogram {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 40px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.6rem, 6vw, 4rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.von {
|
||||
font-weight: 300;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.surname {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.ai-swap {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ai-swap .letter {
|
||||
display: inline-block;
|
||||
color: var(--accent);
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
}
|
||||
|
||||
.ai-swap .letter.hidden {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ai-swap .letter.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-dim);
|
||||
max-width: 560px;
|
||||
margin: 0 auto 48px;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.hero-subtitle strong {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cta-group {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #0a0a0c;
|
||||
box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 50px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
color: var(--text);
|
||||
border-color: #2a2a35;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
/* --- Section shared --- */
|
||||
section {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--text-dim);
|
||||
font-size: 1rem;
|
||||
max-width: 520px;
|
||||
margin-bottom: 56px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* --- Divider --- */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- Expertise grid --- */
|
||||
.expertise-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.expertise-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 32px;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.expertise-card:hover {
|
||||
border-color: #2a2a35;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.expertise-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: var(--accent-subtle);
|
||||
border: 1px solid rgba(201, 168, 76, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.expertise-card h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.expertise-card p {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.6;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* --- Stats --- */
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
text-align: center;
|
||||
padding: 32px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-dim);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* --- Profile section --- */
|
||||
.profile-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 48px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.profile-text p {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.8;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.profile-text p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-dim);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* --- CTA Section --- */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 80px 0 120px;
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cta-section .section-desc {
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
/* --- Footer --- */
|
||||
footer {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
@media (max-width: 768px) {
|
||||
.expertise-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.profile-section {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero {
|
||||
padding: 140px 0 80px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 64px 0;
|
||||
}
|
||||
|
||||
.monogram {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo">von<span class="accent">Schr</span>eitter</div>
|
||||
<a href="#kontakt">Kontakt</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="monogram">FvS</div>
|
||||
<div class="hero-badge">
|
||||
<span class="dot"></span>Hogan Lovells
|
||||
</div>
|
||||
<h1>Florian <span class="von">von</span><br>Schr<span class="ai-swap"><span class="letter visible" id="letterA">A</span><span class="letter hidden" id="letterE">E</span></span><span class="surname">I</span>tter</h1>
|
||||
<p class="hero-subtitle">
|
||||
<strong>Kartellrecht</strong> mit Weitblick. Fusionskontrolle, Kartellverfahren
|
||||
und Compliance-Strategien — fuer Unternehmen, die Maerkte gestalten.
|
||||
</p>
|
||||
<div class="cta-group">
|
||||
<a href="#kontakt" class="btn btn-primary">Kontakt aufnehmen</a>
|
||||
<a href="#expertise" class="btn btn-ghost">Expertise</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Expertise -->
|
||||
<section id="expertise">
|
||||
<div class="container">
|
||||
<div class="section-label">Schwerpunkte</div>
|
||||
<h2>Kartellrecht. Durchdacht.</h2>
|
||||
<div class="section-desc">
|
||||
Von der strategischen Beratung bis zur Verteidigung vor den
|
||||
Behoerden — praeziese Arbeit in den Kernbereichen des Wettbewerbsrechts.
|
||||
</div>
|
||||
|
||||
<div class="expertise-grid">
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">FK</div>
|
||||
<h3>Fusionskontrolle</h3>
|
||||
<p>
|
||||
Anmeldungen bei BKartA, EU-Kommission und international.
|
||||
Remedy-Strategien, Phase-II-Verfahren, Gun-Jumping-Praevention.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">KV</div>
|
||||
<h3>Kartellverfahren</h3>
|
||||
<p>
|
||||
Verteidigung in Bussgeldverfahren. Kronzeugenantraege,
|
||||
Settlement-Verhandlungen, Zusammenarbeit mit Behoerden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">CP</div>
|
||||
<h3>Compliance</h3>
|
||||
<p>
|
||||
Aufbau und Audit von Kartell-Compliance-Programmen.
|
||||
Schulungen, interne Untersuchungen, Dawn-Raid-Readiness.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">VB</div>
|
||||
<h3>Vertriebskartellrecht</h3>
|
||||
<p>
|
||||
Selektiver Vertrieb, Online-Marktplaetze, Preisbindung.
|
||||
Gestaltung kartellrechtskonformer Vertriebssysteme.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">PE</div>
|
||||
<h3>Private Enforcement</h3>
|
||||
<p>
|
||||
Kartellschadensersatzklagen. Anspruchsdurchsetzung
|
||||
und -abwehr nach deutschem und EU-Recht.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expertise-card">
|
||||
<div class="expertise-icon">DM</div>
|
||||
<h3>Digitale Maerkte</h3>
|
||||
<p>
|
||||
DMA, GWB-Digitalisierung, Plattformregulierung.
|
||||
Wettbewerbsfragen an der Schnittstelle von Tech und Recht.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Profile -->
|
||||
<section id="profil">
|
||||
<div class="container">
|
||||
<div class="section-label">Profil</div>
|
||||
<h2>Strategie trifft Praezision.</h2>
|
||||
|
||||
<div class="profile-section">
|
||||
<div class="profile-text">
|
||||
<p>
|
||||
Florian von Schreitter beraet nationale und internationale
|
||||
Unternehmen in allen Fragen des deutschen und europaeischen
|
||||
Kartellrechts. Sein Schwerpunkt liegt auf komplexen
|
||||
Fusionskontrollverfahren und der Verteidigung in
|
||||
Kartellbussgeldverfahren.
|
||||
</p>
|
||||
<p>
|
||||
Als Rechtsanwalt bei Hogan Lovells verbindet er tiefes
|
||||
regulatorisches Verstaendnis mit strategischem Denken —
|
||||
fuer Loesungen, die wirtschaftlich tragfaehig und
|
||||
rechtlich belastbar sind.
|
||||
</p>
|
||||
</div>
|
||||
<div class="profile-details">
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Kanzlei</div>
|
||||
<div class="detail-value">Hogan Lovells International LLP</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Praxisgruppe</div>
|
||||
<div class="detail-value">Competition, Regulation & Trade</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Standort</div>
|
||||
<div class="detail-value">Duesseldorf, Deutschland</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Zulassung</div>
|
||||
<div class="detail-value">Rechtsanwalt (Deutschland)</div>
|
||||
</div>
|
||||
<div class="detail-card">
|
||||
<div class="detail-label">Sprachen</div>
|
||||
<div class="detail-value">Deutsch, Englisch</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<section id="kontakt" class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-label">Kontakt</div>
|
||||
<h2>Sprechen wir darueber.</h2>
|
||||
<div class="section-desc">
|
||||
Kartellrechtliche Fragen verdienen fruehzeitige, strategische Beratung.
|
||||
Nehmen Sie Kontakt auf.
|
||||
</div>
|
||||
<div class="cta-group">
|
||||
<a href="mailto:florian.vonschreitter@hoganlovells.com" class="btn btn-primary">E-Mail schreiben</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>vonschr<span style="color: var(--accent);">AI</span>tter.de — Florian von Schreitter</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const a = document.getElementById('letterA');
|
||||
const e = document.getElementById('letterE');
|
||||
setInterval(() => {
|
||||
a.classList.toggle('visible');
|
||||
a.classList.toggle('hidden');
|
||||
e.classList.toggle('visible');
|
||||
e.classList.toggle('hidden');
|
||||
}, 3000);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/vonschraitter.de/site.yaml
Normal file
4
sites/vonschraitter.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: vonschraitter.de
|
||||
template: custom
|
||||
title: "Florian von Schreitter — Kartellrecht"
|
||||
description: "Florian von Schreitter — Kartellrechtsspezialist bei Hogan Lovells. Fusionskontrolle, Kartellverfahren, Compliance."
|
||||
423
sites/wartebitte.de/index.html
Normal file
423
sites/wartebitte.de/index.html
Normal file
@@ -0,0 +1,423 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Warte bitte.</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🫖</text></svg>">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Newsreader:ital,wght@0,300;0,400;1,300;1,400&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #faf8f5;
|
||||
--text: #2a2520;
|
||||
--text-soft: #6b6259;
|
||||
--text-faint: #a69e94;
|
||||
--accent: #c4a882;
|
||||
--accent-soft: rgba(196, 168, 130, 0.15);
|
||||
--line: rgba(196, 168, 130, 0.2);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Newsreader', Georgia, serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.8;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page {
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
padding: 120px 24px 80px;
|
||||
}
|
||||
|
||||
/* Teapot */
|
||||
.icon {
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 48px;
|
||||
opacity: 0.8;
|
||||
animation: steam 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes steam {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-4px); }
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Newsreader', Georgia, serif;
|
||||
font-size: clamp(2.2rem, 5vw, 3rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 40px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.rule {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: var(--accent);
|
||||
margin-bottom: 40px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.prose {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
font-size: 1.08rem;
|
||||
color: var(--text-soft);
|
||||
font-weight: 300;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.prose p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose em {
|
||||
font-style: italic;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: var(--accent-soft);
|
||||
padding: 28px 32px;
|
||||
border-radius: 12px;
|
||||
border-left: 2px solid var(--accent);
|
||||
margin: 48px 0;
|
||||
}
|
||||
|
||||
.highlight p {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-soft);
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.closing {
|
||||
margin-top: 56px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.closing p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-faint);
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.breath-container {
|
||||
text-align: center;
|
||||
margin: 56px 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.breath-circle {
|
||||
width: 140px; height: 140px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--accent);
|
||||
margin: 0 auto 24px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.3s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.breath-circle.active {
|
||||
animation: breathe var(--cycle-duration, 8s) ease-in-out infinite;
|
||||
}
|
||||
|
||||
.breath-circle .ring {
|
||||
position: absolute; inset: -8px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid transparent;
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
.breath-circle.active .ring {
|
||||
border-color: var(--accent-soft);
|
||||
animation: ringPulse var(--cycle-duration, 8s) ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-soft); }
|
||||
25% { transform: scale(1.35); box-shadow: 0 0 40px 10px var(--accent-soft); }
|
||||
50% { transform: scale(1.35); box-shadow: 0 0 40px 10px var(--accent-soft); }
|
||||
75% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-soft); }
|
||||
}
|
||||
|
||||
@keyframes ringPulse {
|
||||
0%, 100% { transform: scale(1); opacity: 0.3; }
|
||||
25% { transform: scale(1.3); opacity: 0.6; }
|
||||
50% { transform: scale(1.3); opacity: 0.6; }
|
||||
75% { transform: scale(1); opacity: 0.3; }
|
||||
}
|
||||
|
||||
.breath-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-faint);
|
||||
letter-spacing: 0.15em;
|
||||
font-weight: 300;
|
||||
min-height: 1.4em;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.breath-label.inhale { color: var(--accent); }
|
||||
|
||||
.breath-timer-select {
|
||||
display: flex; gap: 8px; justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.breath-timer-select button {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-faint);
|
||||
background: none;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 100px;
|
||||
padding: 5px 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.breath-timer-select button:hover { color: var(--text-soft); border-color: var(--accent); }
|
||||
.breath-timer-select button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
|
||||
|
||||
.breath-countdown {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-faint);
|
||||
margin-top: 12px;
|
||||
font-weight: 300;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin: 48px 0;
|
||||
}
|
||||
|
||||
.dots span {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
opacity: 0.4;
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.dots span:nth-child(2) { animation-delay: 1s; }
|
||||
.dots span:nth-child(3) { animation-delay: 2s; }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.2; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 80px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--line);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-faint);
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Fade in */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.page > * {
|
||||
animation: fadeUp 1s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.page > *:nth-child(1) { animation-delay: 0.2s; }
|
||||
.page > *:nth-child(2) { animation-delay: 0.5s; }
|
||||
.page > *:nth-child(3) { animation-delay: 0.8s; }
|
||||
.page > *:nth-child(4) { animation-delay: 1.1s; }
|
||||
.page > *:nth-child(5) { animation-delay: 1.4s; }
|
||||
.page > *:nth-child(6) { animation-delay: 1.7s; }
|
||||
.page > *:nth-child(7) { animation-delay: 2.0s; }
|
||||
.page > *:nth-child(8) { animation-delay: 2.3s; }
|
||||
.page > *:nth-child(9) { animation-delay: 2.6s; }
|
||||
|
||||
@media (max-width: 540px) {
|
||||
.page { padding: 80px 20px 60px; }
|
||||
.highlight { padding: 20px 24px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page">
|
||||
|
||||
<div class="icon">🫖</div>
|
||||
|
||||
<h1>Warte bitte.</h1>
|
||||
|
||||
<div class="rule"></div>
|
||||
|
||||
<div class="prose">
|
||||
<p>
|
||||
Ich weiss, du wartest. Und Warten fuehlt sich manchmal an wie
|
||||
Stillstand. Wie verlorene Zeit. Wie etwas, das nicht sein muesste.
|
||||
</p>
|
||||
<p>
|
||||
Aber manche Dinge brauchen genau diese Zeit. Nicht weil jemand
|
||||
troedelt, sondern weil <em>gute Ergebnisse nicht gehetzt werden koennen</em>.
|
||||
Ein Gedanke muss reifen. Eine Loesung muss stimmen. Nicht nur schnell,
|
||||
sondern richtig.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="dots"><span></span><span></span><span></span></div>
|
||||
|
||||
<div class="highlight">
|
||||
<p>
|
||||
Zeit ist unser kostbarstes Gut. Wer sie gibt, gibt das Wertvollste,
|
||||
was er hat. Und wer sie bekommt, sollte wissen: Da arbeitet jemand
|
||||
daran, dass es sich lohnt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="prose">
|
||||
<p>
|
||||
Es ist okay, ungeduldig zu sein. Ungeduld zeigt, dass dir etwas
|
||||
wichtig ist. Aber lass sie nicht den Blick trueben fuer das,
|
||||
was gerade im Hintergrund passiert.
|
||||
</p>
|
||||
<p>
|
||||
Gute Dinge brauchen Raum. Einen ruhigen Moment.
|
||||
Einen zweiten Blick. Manchmal einen dritten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="breath-container">
|
||||
<div class="breath-circle" id="breathCircle" onclick="toggleBreathing()">
|
||||
<div class="ring"></div>
|
||||
<span class="breath-label" id="breathLabel">start</span>
|
||||
</div>
|
||||
<div class="breath-timer-select">
|
||||
<button onclick="setTimer(1)" id="t1">1 min</button>
|
||||
<button onclick="setTimer(2)" id="t2" class="active">2 min</button>
|
||||
<button onclick="setTimer(5)" id="t5">5 min</button>
|
||||
<button onclick="setTimer(0)" id="t0">endlos</button>
|
||||
</div>
|
||||
<div class="breath-countdown" id="countdown"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let breathing = false;
|
||||
let timer = null;
|
||||
let duration = 120;
|
||||
let remaining = 0;
|
||||
let phaseTimer = null;
|
||||
const cycle = 8000;
|
||||
const phases = [
|
||||
{ label: 'einatmen', duration: 2000, cls: 'inhale' },
|
||||
{ label: 'halten', duration: 2000, cls: '' },
|
||||
{ label: 'ausatmen', duration: 2000, cls: '' },
|
||||
{ label: 'ruhe', duration: 2000, cls: '' },
|
||||
];
|
||||
|
||||
function setTimer(min) {
|
||||
duration = min * 60;
|
||||
document.querySelectorAll('.breath-timer-select button').forEach(b => b.classList.remove('active'));
|
||||
document.getElementById('t' + min).classList.add('active');
|
||||
if (breathing) { stopBreathing(); startBreathing(); }
|
||||
}
|
||||
|
||||
function toggleBreathing() {
|
||||
if (breathing) stopBreathing(); else startBreathing();
|
||||
}
|
||||
|
||||
function startBreathing() {
|
||||
breathing = true;
|
||||
remaining = duration;
|
||||
const circle = document.getElementById('breathCircle');
|
||||
circle.style.setProperty('--cycle-duration', cycle + 'ms');
|
||||
circle.classList.add('active');
|
||||
runPhases();
|
||||
if (duration > 0) {
|
||||
updateCountdown();
|
||||
timer = setInterval(() => {
|
||||
remaining--;
|
||||
updateCountdown();
|
||||
if (remaining <= 0) stopBreathing();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function stopBreathing() {
|
||||
breathing = false;
|
||||
document.getElementById('breathCircle').classList.remove('active');
|
||||
document.getElementById('breathLabel').textContent = 'start';
|
||||
document.getElementById('breathLabel').className = 'breath-label';
|
||||
document.getElementById('countdown').textContent = '';
|
||||
clearInterval(timer);
|
||||
clearTimeout(phaseTimer);
|
||||
}
|
||||
|
||||
function runPhases() {
|
||||
let i = 0;
|
||||
function next() {
|
||||
if (!breathing) return;
|
||||
const p = phases[i % phases.length];
|
||||
const label = document.getElementById('breathLabel');
|
||||
label.textContent = p.label;
|
||||
label.className = 'breath-label' + (p.cls ? ' ' + p.cls : '');
|
||||
i++;
|
||||
phaseTimer = setTimeout(next, p.duration);
|
||||
}
|
||||
next();
|
||||
}
|
||||
|
||||
function updateCountdown() {
|
||||
if (duration === 0) { document.getElementById('countdown').textContent = ''; return; }
|
||||
const m = Math.floor(remaining / 60);
|
||||
const s = remaining % 60;
|
||||
document.getElementById('countdown').textContent = m + ':' + String(s).padStart(2, '0');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="closing">
|
||||
<p>
|
||||
Du bekommst, was du brauchst. Nur nicht genau jetzt.
|
||||
Und das ist voellig in Ordnung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>wartebitte.de</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/wartebitte.de/site.yaml
Normal file
4
sites/wartebitte.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: wartebitte.de
|
||||
template: custom
|
||||
title: "Warte bitte."
|
||||
description: ""
|
||||
Reference in New Issue
Block a user