Spaces:

Multimedix
/

anycoder-551db4d9

Running

File size: 30,908 Bytes

4be3d14

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI-Berater & Vibe-Coding Guide 2025</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0a0a0f;--bg2:#12121a;--bg3:#1a1a28;--bg4:#222236;
--text:#e8e8f0;--text2:#a0a0b8;--text3:#6a6a82;
--accent:#6c5ce7;--accent2:#a29bfe;--accent3:#4ecdc4;
--green:#00b894;--yellow:#fdcb6e;--red:#e17055;--orange:#f39c12;
--pink:#fd79a8;--blue:#0984e3;
--radius:12px;--radius-sm:8px;--radius-lg:20px;
--shadow:0 8px 32px rgba(0,0,0,.4);
--glass:rgba(255,255,255,.04);
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
a{color:var(--accent2);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent3)}
code,.mono{font-family:'JetBrains Mono',monospace}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

/* Header */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(10,10,15,.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(108,92,231,.15)}
.header-inner{max-width:1400px;margin:0 auto;padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--text)}
.logo i{color:var(--accent);font-size:1.5rem}
.logo span{background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.built-with{font-size:.7rem;color:var(--text3);padding:.2rem .6rem;border:1px solid var(--bg4);border-radius:20px;transition:all .3s}
.built-with:hover{border-color:var(--accent);color:var(--accent2)}

/* Nav */
.nav{display:flex;gap:.25rem;flex-wrap:wrap}
.nav-btn{padding:.5rem 1rem;border:none;background:transparent;color:var(--text2);font-size:.8rem;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:all .25s;font-family:inherit;white-space:nowrap}
.nav-btn:hover{background:var(--glass);color:var(--text)}
.nav-btn.active{background:var(--accent);color:#fff}

/* Main */
.main{margin-top:70px;padding:1.5rem;max-width:1400px;margin-left:auto;margin-right:auto}
.section{display:none;animation:fadeUp .4s ease}
.section.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Hero */
.hero{text-align:center;padding:3rem 1rem 2rem;position:relative}
.hero::before{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(108,92,231,.12),transparent 70%);pointer-events:none}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;line-height:1.15;margin-bottom:1rem}
.hero h1 .grad{background:linear-gradient(135deg,var(--accent),var(--accent3),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--text2);font-size:1.1rem;max-width:700px;margin:0 auto 1.5rem}
.hero-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem;background:var(--glass);border:1px solid rgba(108,92,231,.3);border-radius:20px;font-size:.75rem;color:var(--accent2);margin-bottom:1.5rem}

/* Cards */
.card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:1.5rem;transition:all .3s}
.card:hover{border-color:rgba(108,92,231,.3);transform:translateY(-2px);box-shadow:var(--shadow)}
.card-glass{background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.06)}

/* Grid */
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* Section Titles */
.stitle{font-size:1.5rem;font-weight:800;margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem}
.stitle i{color:var(--accent);font-size:1.2rem}
.sdesc{color:var(--text2);font-size:.9rem;margin-bottom:1.5rem}

/* Comparison Table */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--bg4)}
table{width:100%;border-collapse:collapse;min-width:1100px;font-size:.82rem}
thead{background:var(--bg3)}
th{padding:.75rem .6rem;text-align:left;font-weight:600;color:var(--accent2);white-space:nowrap;border-bottom:2px solid var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}
td{padding:.7rem .6rem;border-bottom:1px solid var(--bg4);vertical-align:middle}
tbody tr{transition:background .2s}
tbody tr:hover{background:rgba(108,92,231,.06)}
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:20px;font-size:.7rem;font-weight:600;white-space:nowrap}
.badge-free{background:rgba(0,184,148,.15);color:var(--green)}
.badge-paid{background:rgba(108,92,231,.15);color:var(--accent2)}
.badge-freemium{background:rgba(253,203,110,.15);color:var(--yellow)}
.badge-best{background:rgba(108,92,231,.2);color:var(--accent2);border:1px solid var(--accent)}
.stars{color:var(--yellow);font-size:.7rem;letter-spacing:1px}
.price{font-weight:700;color:var(--green);font-size:.9rem}
.price-note{font-size:.65rem;color:var(--text3);display:block}
.tag{display:inline-block;padding:.15rem .45rem;background:var(--bg4);border-radius:4px;font-size:.65rem;margin:.1rem;color:var(--text2)}
.recommend{background:rgba(0,184,148,.08);border-color:rgba(0,184,148,.3)}
.recommend td:first-child{box-shadow:inset 3px 0 0 var(--green)}

/* Advisor */
.advisor-form{display:grid;gap:1rem;max-width:700px}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{font-size:.8rem;font-weight:600;color:var(--text2)}
.form-group select,.form-group input{padding:.6rem .8rem;background:var(--bg3);border:1px solid var(--bg4);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:.85rem;transition:border-color .2s}
.form-group select:focus,.form-group input:focus{outline:none;border-color:var(--accent)}
.btn{padding:.7rem 1.5rem;border:none;border-radius:var(--radius-sm);font-family:inherit;font-weight:600;cursor:pointer;transition:all .25s;font-size:.85rem;display:inline-flex;align-items:center;gap:.5rem}
.btn-primary{background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,92,231,.4)}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--bg4)}
.btn-secondary:hover{border-color:var(--accent)}
.result-card{border-left:3px solid var(--accent);padding:1.25rem;background:var(--bg2);border-radius:0 var(--radius) var(--radius) 0;margin-top:.5rem}
.result-card h4{font-size:1rem;margin-bottom:.4rem}
.result-card p{font-size:.85rem;color:var(--text2);line-height:1.6}

/* Blog */
.blog{max-width:800px}
.blog h2{font-size:1.6rem;font-weight:800;margin:2rem 0 .8rem;color:var(--text);scroll-margin-top:80px}
.blog h3{font-size:1.2rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--accent2)}
.blog p{color:var(--text2);margin-bottom:1rem;font-size:.92rem;line-height:1.8}
.blog ul{color:var(--text2);margin:0 0 1rem 1.5rem;font-size:.9rem}
.blog li{margin-bottom:.4rem}
.blog blockquote{border-left:3px solid var(--accent);padding:.8rem 1.2rem;margin:1.2rem 0;background:var(--glass);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--text2)}
.blog .toc{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:1.25rem;margin-bottom:2rem}
.blog .toc h4{font-size:.9rem;margin-bottom:.6rem;color:var(--accent2)}
.blog .toc a{display:block;padding:.2rem 0;font-size:.82rem;color:var(--text2)}
.blog .toc a:hover{color:var(--accent2)}
.blog .info-box{background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.2);border-radius:var(--radius-sm);padding:1rem;margin:1rem 0;font-size:.85rem;color:var(--text2)}
.blog .source{font-size:.7rem;color:var(--text3);margin-top:.3rem;display:flex;align-items:center;gap:.3rem}

/* Quiz */
.quiz-container{max-width:750px}
.quiz-progress{height:4px;background:var(--bg4);border-radius:2px;margin-bottom:1.5rem;overflow:hidden}
.quiz-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:2px;transition:width .4s ease}
.quiz-q{font-size:1.1rem;font-weight:700;margin-bottom:1rem}
.quiz-options{display:grid;gap:.6rem}
.quiz-opt{padding:.8rem 1rem;background:var(--bg2);border:2px solid var(--bg4);border-radius:var(--radius-sm);cursor:pointer;transition:all .25s;font-size:.85rem;display:flex;align-items:center;gap:.7rem}
.quiz-opt:hover{border-color:var(--accent);background:rgba(108,92,231,.06)}
.quiz-opt.selected{border-color:var(--accent);background:rgba(108,92,231,.12)}
.quiz-opt.correct{border-color:var(--green);background:rgba(0,184,148,.1)}
.quiz-opt.wrong{border-color:var(--red);background:rgba(225,112,85,.1)}
.quiz-opt .letter{width:28px;height:28px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0}
.quiz-result{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:2rem;text-align:center}
.quiz-score{font-size:3rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Charts */
.chart-container{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:1.25rem;position:relative}
.chart-container canvas{max-height:350px}
.chart-title{font-size:.85rem;font-weight:600;margin-bottom:.75rem;color:var(--text2)}

/* Stats */
.stat-card{text-align:center;padding:1.5rem;background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius)}
.stat-num{font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{font-size:.75rem;color:var(--text3);margin-top:.3rem}

/* Datasheet */
.datasheet{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);overflow:hidden}
.datasheet-header{padding:1rem 1.25rem;background:var(--bg3);display:flex;align-items:center;gap:.8rem;cursor:pointer;transition:background .2s}
.datasheet-header:hover{background:var(--bg4)}
.datasheet-header h3{font-size:1rem;flex:1}
.datasheet-header .arrow{transition:transform .3s;color:var(--text3)}
.datasheet-header.open .arrow{transform:rotate(180deg)}
.datasheet-body{padding:0 1.25rem;max-height:0;overflow:hidden;transition:all .4s ease}
.datasheet-body.open{max-height:2000px;padding:1.25rem}
.ds-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--bg4);font-size:.82rem}
.ds-row:last-child{border:none}
.ds-label{color:var(--text3)}
.ds-value{color:var(--text);font-weight:500;text-align:right}

/* Footer */
.footer{text-align:center;padding:2rem 1rem;color:var(--text3);font-size:.75rem;border-top:1px solid var(--bg4);margin-top:3rem}

/* Responsive */
@media(max-width:768px){
.nav{gap:.15rem}.nav-btn{padding:.4rem .6rem;font-size:.7rem}
.main{padding:1rem}
.hero h1{font-size:1.8rem}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
table{font-size:.72rem}
th,td{padding:.5rem .35rem}
}
@media(max-width:480px){
.header-inner{padding:.5rem .75rem}
.logo{font-size:1rem}
}

/* Animations */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.animate-float{animation:float 3s ease-in-out infinite}

/* Toast */
.toast{position:fixed;bottom:2rem;right:2rem;padding:.8rem 1.2rem;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;transform:translateY(100px);opacity:0;transition:all .4s;z-index:9999}
.toast.show{transform:translateY(0);opacity:1}

/* Filter pills */
.filter-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.pill{padding:.35rem .8rem;border:1px solid var(--bg4);border-radius:20px;font-size:.72rem;cursor:pointer;transition:all .2s;color:var(--text2);background:transparent;font-family:inherit}
.pill:hover,.pill.active{border-color:var(--accent);color:var(--accent2);background:rgba(108,92,231,.1)}

/* Date stamp */
.date-stamp{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--text3);padding:.2rem .6rem;background:var(--bg3);border-radius:20px}
</style>
</head>
<body>

<header class="header">
<div class="header-inner">
<div style="display:flex;align-items:center;gap:.8rem;flex-wrap:wrap">
<div class="logo"><i class="fas fa-robot"></i> <span>AI-Berater</span></div>
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
</div>
<nav class="nav">
<button class="nav-btn active" data-tab="overview"><i class="fas fa-home"></i> Übersicht</button>
<button class="nav-btn" data-tab="compare"><i class="fas fa-table"></i> Vergleich</button>
<button class="nav-btn" data-tab="advisor"><i class="fas fa-lightbulb"></i> Berater</button>
<button class="nav-btn" data-tab="blog"><i class="fas fa-book-open"></i> Blog</button>
<button class="nav-btn" data-tab="quiz"><i class="fas fa-brain"></i> Quiz</button>
<button class="nav-btn" data-tab="stats"><i class="fas fa-chart-bar"></i> Statistiken</button>
</nav>
</div>
</header>

<main class="main">

<!-- OVERVIEW -->
<section class="section active" id="overview">
<div class="hero">
<div class="hero-badge"><i class="fas fa-calendar-alt"></i> Stand: Juli 2025</div>
<h1>Dein <span class="grad">AI-Berater</span> für<br>Vibe-Coding & Web-Apps</h1>
<p>Umfassender Vergleich aller wichtigen AI-Tools für die Webentwicklung – optimiert für ein Budget von max. € 25,00/Monat in Österreich.</p>
<div style="display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap">
<button class="btn btn-primary" onclick="switchTab('compare')"><i class="fas fa-table"></i> Vergleich starten</button>
<button class="btn btn-secondary" onclick="switchTab('advisor')"><i class="fas fa-lightbulb"></i> Beratung erhalten</button>
</div>
</div>

<div class="grid grid-4" style="margin-top:1rem">
<div class="stat-card"><div class="stat-num">9+</div><div class="stat-label">AI-Tools verglichen</div></div>
<div class="stat-card"><div class="stat-num">€25</div><div class="stat-label">Max. Monatsbudget</div></div>
<div class="stat-card"><div class="stat-num">6</div><div class="stat-label">Technologien</div></div>
<div class="stat-card"><div class="stat-num">2025</div><div class="stat-label">Aktuelle Daten</div></div>
</div>

<div style="margin-top:2rem">
<h2 class="stitle"><i class="fas fa-trophy"></i> Top-Empfehlungen (≤ €25/Monat)</h2>
<p class="sdesc">Für Vibe-Coding und Web-App-Entwicklung in Österreich</p>
<div class="grid grid-3">
<div class="card" style="border-color:rgba(0,184,148,.3);box-shadow:0 0 20px rgba(0,184,148,.08)">
<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem">
<div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#d4a574,#8B6914);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff">C</div>
<div><strong style="font-size:1rem">Claude Pro</strong><br><span class="badge badge-best" style="font-size:.65rem"><i class="fas fa-crown"></i> BESTES GESAMT</span></div>
</div>
<p style="font-size:.82rem;color:var(--text2);margin-bottom:.8rem">Hervorragend für Vibe-Coding: Sehr gutes Code-Verständnis, lange Kontextfenster, Artifacts für Live-Vorschau. Ideal für React, HTML/CSS/JS.</p>
<div style="display:flex;justify-content:space-between;align-items:center">
<span class="price">€20,00<span class="price-note">/Monat inkl. USt.</span></span>
<span class="stars">★★★★★</span>
</div>
</div>

<div class="card" style="border-color:rgba(9,132,227,.3)">
<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem">
<div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#10a37f,#1a7f64);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff">G</div>
<div><strong style="font-size:1rem">ChatGPT Plus</strong><br><span class="badge badge-paid" style="font-size:.65rem">ALLROUNDER</span></div>
</div>
<p style="font-size:.82rem;color:var(--text2);margin-bottom:.8rem">GPT-4o + Canvas für Code: Breitestes Ökosystem, GPTs, DALL-E, Advanced Data Analysis. Solide für alle Web-Technologien.</p>
<div style="display:flex;justify-content:space-between;align-items:center">
<span class="price">€22,47<span class="price-note">/Monat inkl. USt.</span></span>
<span class="stars">★★★★½</span>
</div>
</div>

<div class="card" style="border-color:rgba(78,205,196,.3)">
<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem">
<div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#4285f4,#34a853);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff">G</div>
<div><strong style="font-size:1rem">Gemini Advanced</strong><br><span class="badge badge-freemium" style="font-size:.65rem">KONTEXT-CHAMP</span></div>
</div>
<p style="font-size:.82rem;color:var(--text2);margin-bottom:.8rem">1M Token Kontext: Perfekt für große Codebases. Google One AI Premium inkl. 2TB Speicher. Gute Multimodal-Fähigkeiten.</p>
<div style="display:flex;justify-content:space-between;align-items:center">
<span class="price">€21,99<span class="price-note">/Monat inkl. USt.</span></span>
<span class="stars">★★★★</span>
</div>
</div>
</div>
</div>

<div style="margin-top:2rem">
<h2 class="stitle"><i class="fas fa-coins"></i> Budget-Tipp: Kostenlos & Low-Budget</h2>
<p class="sdesc">Auch ohne Abo kann man bereits viel erreichen</p>
<div class="grid grid-3">
<div class="card card-glass">
<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem">
<i class="fas fa-fire" style="color:var(--green);font-size:1.3rem"></i>
<strong>DeepSeek V3/R1</strong>
</div>
<p style="font-size:.82rem;color:var(--text2);margin-bottom:.5rem">Komplett kostenlos, extrem leistungsstark für Code. Open-Source-Modell, API sehr günstig. Überraschend gut bei Web-Dev-Aufgaben.</p>
<span class="badge badge-free"><i class="fas fa-gift"></i> 100% Kostenlos</span>
</div>
<div class="card card-glass">
<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem">
<i class="fas fa-wind" style="color:var(--blue);font-size:1.3rem"></i>
<strong>Mistral Le Chat</strong>
</div>
<p style="font-size:.82rem;color:var(--text2);margin-bottom:.5rem">Kostenlos nutzbar, gute Code-Fähigkeiten. Europäisches Unternehmen (DSGVO-freundlich). Codestral speziell für Code.</p>
<span class="badge badge-free"><i class="fas fa-gift"></i> Kostenlos</span>
</div>
<div class="card card-glass">
<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem">
<i class="fas fa-face-smile" style="color:var(--yellow);font-size:1.3rem"></i>
<strong>HuggingFace Chat</strong>
</div>
<p style="font-size:.82rem;color:var(--text2);margin-bottom:.5rem">Zugang zu Open-Source-Modellen kostenlos. Pro für €8/Monat mit mehr Features. Ideal zum Experimentieren mit verschiedenen Modellen.</p>
<span class="badge badge-freemium"><i class="fas fa-star"></i> Freemium ab €8</span>
</div>
</div>
</div>
</section>

<!-- COMPARISON TABLE -->
<section class="section" id="compare">
<h2 class="stitle"><i class="fas fa-table"></i> Vergleichstabelle – AI-Tools für Vibe-Coding</h2>
<p class="sdesc">Alle Preise inkl. 20% österreichischer USt., Stand: Juli 2025</p>

<div class="filter-pills">
<button class="pill active" data-filter="all">Alle</button>
<button class="pill" data-filter="free">Kostenlos</button>
<button class="pill" data-filter="paid">Kostenpflichtig</button>
<button class="pill" data-filter="under25">Unter €25</button>
</div>

<div class="table-wrap">
<table id="compareTable">
<thead>
<tr>
<th>AI-Tool</th>
<th>Modell</th>
<th>Preis/Monat</th>
<th>Typ</th>
<th>Kontext</th>
<th>Code-Qualität</th>
<th>Vibe-Coding</th>
<th>Web-Tech</th>
<th>Bewertung</th>
<th>Empfehlung</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
</div>

<div style="margin-top:1.5rem">
<h3 class="stitle" style="font-size:1.1rem"><i class="fas fa-info-circle"></i> Detail-Datenblätter</h3>
<div id="datasheets" style="display:grid;gap:.6rem"></div>
</div>
</section>

<!-- ADVISOR -->
<section class="section" id="advisor">
<h2 class="stitle"><i class="fas fa-lightbulb"></i> Persönlicher AI-Berater</h2>
<p class="sdesc">Beantworte ein paar Fragen und erhalte deine individuelle Empfehlung</p>

<div class="grid grid-2">
<div class="card">
<h3 style="font-size:1rem;margin-bottom:1rem"><i class="fas fa-clipboard-list" style="color:var(--accent)"></i> Dein Profil</h3>
<form class="advisor-form" id="advisorForm">
<div class="form-group">
<label><i class="fas fa-code"></i> Hauptsächliche Technologie?</label>
<select id="adv-tech">
<option value="html">HTML / CSS / JS (Vanilla)</option>
<option value="react">React / Next.js</option>
<option value="python">Python (Flask/Django/FastAPI)</option>
<option value="node">Node.js / Express</option>
<option value="fullstack">Fullstack (Mix)</option>
</select>
</div>
<div class="form-group">
<label><i class="fas fa-bullseye"></i> Hauptverwendungszweck?</label>
<select id="adv-purpose">
<option value="vibecoding">Vibe-Coding (AI-gestützte Entwicklung)</option>
<option value="learning">Lernen & Experimentieren</option>
<option value="production">Produktions-Web-Apps</option>
<option value="prototyping">Schnelle Prototypen</option>
</select>
</div>
<div class="form-group">
<label><i class="fas fa-wallet"></i> Monatsbudget (€)?</label>
<select id="adv-budget">
<option value="0">Kostenlos (€0)</option>
<option value="10">Bis €10</option>
<option value="20">Bis €20</option>
<option value="25" selected>Bis €25</option>
</select>
</div>
<div class="form-group">
<label><i class="fas fa-shield-alt"></i> Wie wichtig ist Datenschutz (DSGVO)?</label>
<select id="adv-privacy">
<option value="low">Nicht so wichtig</option>
<option value="medium">Eher wichtig</option>
<option value="high">Sehr wichtig (EU-Server)</option>
</select>
</div>
<div class="form-group">
<label><i class="fas fa-puzzle-piece"></i> Welche Features brauchst du?</label>
<div style="display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem">
<label class="pill" style="cursor:pointer"><input type="checkbox" value="artifacts" style="display:none"> Live-Vorschau</label>
<label class="pill" style="cursor:pointer"><input type="checkbox" value="canvas" style="display:none"> Canvas/Editor</label>
<label class="pill" style="cursor:pointer"><input type="checkbox" value="images" style="display:none"> Bildgenerierung</label>
<label class="pill" style="cursor:pointer"><input type="checkbox" value="api" style="display:none"> API-Zugang</label>
<label class="pill" style="cursor:pointer"><input type="checkbox" value="longcontext" style="display:none"> Lange Kontexte</label>
</div>
</div>
<div class="form-group">
<label><i class="fas fa-gauge-high"></i> Erfahrungsniveau?</label>
<select id="adv-exp">
<option value="beginner">Anfänger</option>
<option value="intermediate">Fortgeschritten</option>
<option value="expert">Experte</option>
</select>
</div>
<button type="button" class="btn btn-primary" onclick="generateAdvice()"><i class="fas fa-magic"></i> Empfehlung generieren</button>
</form>
</div>

<div class="card" id="advisorResult" style="display:flex;flex-direction:column;gap:1rem">
<div style="text-align:center;padding:3rem 1rem;color:var(--text3)">
<i class="fas fa-wand-magic-sparkles" style="font-size:3rem;margin-bottom:1rem;display:block;color:var(--accent)"></i>
<p>Fülle das Formular aus und erhalte deine persönliche AI-Empfehlung</p>
</div>
</div>
</div>
</section>

<!-- BLOG -->
<section class="section" id="blog">
<div class="blog">
<div class="date-stamp" style="margin-bottom:1.5rem"><i class="fas fa-calendar"></i> Veröffentlicht: Juli 2025 | Aktualisiert: Juli 2025</div>

<h1 style="font-size:2rem;font-weight:900;line-height:1.2;margin-bottom:1rem">Vibe-Coding & Generative KI:<br><span style="background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent">Alles was du wissen musst</span></h1>

<p style="font-size:1rem;color:var(--text);margin-bottom:1.5rem">Ein umfassender Leitfaden über die Revolution der Softwareentwicklung durch generative Künstliche Intelligenz – von den Grundlagen bis zur Praxis.</p>

<div class="toc">
<h4><i class="fas fa-list"></i> Inhaltsverzeichnis</h4>
<a href="#vc1">1. Was ist Vibe-Coding?</a>
<a href="#vc2">2. Die Geschichte der generativen KI</a>
<a href="#vc3">3. Wie funktionieren Large Language Models?</a>
<a href="#vc4">4. Vibe-Coding in der Praxis</a>
<a href="#vc5">5. Die besten AI-Tools für Web-Entwicklung</a>
<a href="#vc6">6. Prompt-Engineering für Code</a>
<a href="#vc7">7. Rechtliche Aspekte & Datenschutz</a>
<a href="#vc8">8. Die Zukunft von Vibe-Coding</a>
<a href="#vc9">9. Tipps für Einsteiger</a>
<a href="#vc10">10. Fazit & Ausblick</a>
</div>

<h2 id="vc1">1. Was ist Vibe-Coding?</h2>
<p><strong>Vibe-Coding</strong> ist ein 2025 geprägter Begriff, der eine neue Art der Softwareentwicklung beschreibt: Statt jede Codezeile manuell zu schreiben, beschreibt Entwickler:innen <strong>in natürlicher Sprache</strong>, was sie bauen möchten – und KI generiert den entsprechenden Code.</p>

<blockquote>"Vibe-coding is not about writing code. It's about having a conversation with an AI that writes code for you while you focus on the vision." – Andrej Karpathy, 2025</blockquote>

<p>Der Begriff wurde maßgeblich durch <strong>Andrej Karpathy</strong> (Mitgründer von OpenAI, ehemaliger AI-Direktor bei Tesla) populär. Er beschrieb, dass er mittlerweile ganze Projekte "vibe-coded" – also primär durch Konversation mit AI-Systemen erstellt.</p>

<h3>Die drei Säulen des Vibe-Coding</h3>
<ul>
<li><strong>Natural Language Programming:</strong> Du sprichst oder schreibst, was du willst – die KI setzt es um</li>
<li><strong>Iterative Verfeinerung:</strong> Du testest, gibst Feedback, und die KI verbessert den Code schrittweise</li>
<li><strong>Visuelle Validierung:</strong> Tools wie Claude Artifacts oder ChatGPT Canvas zeigen Live-Vorschauen</li>
</ul>

<div class="info-box">
<i class="fas fa-lightbulb" style="color:var(--yellow)"></i> <strong>Praxis-Tipp:</strong> Vibe-Coding ersetzt nicht das Verständnis von Code – es beschleunigt die Umsetzung. Du solltest weiterhin verstehen, was generiert wird, um Fehler zu erkennen und anzupassen.
</div>

<h2 id="vc2">2. Die Geschichte der generativen KI</h2>
<p>Die Entwicklung generativer KI hat in den letzten Jahren eine beispiellose Dynamik erfahren:</p>

<h3>Meilensteine</h3>
<ul>
<li><strong>2017:</strong> Google veröffentlicht das <em>Transformer</em>-Paper ("Attention Is All You Need") – die Grundlage aller modernen LLMs</li>
<li><strong>2018:</strong> OpenAI veröffentlicht GPT-1, Google BERT</li>
<li><strong>2020:</strong> GPT-3 mit 175 Milliarden Parametern – erster LLM, der menschenähnlichen Text erzeugt</li>
<li><strong>2022:</strong> ChatGPT (GPT-3.5) wird zum schnellstwachsenden Consumer-Produkt der Geschichte</li>
<li><strong>2023:</strong> GPT-4, Claude 1/2, Gemini Ultra – Multimodalität wird Standard</li>
<li><strong>2024:</strong> Claude 3.5 Sonnet, GPT-4o, Gemini 1.5 Pro – Code-Fähigkeiten erreichen neues Niveau</li>
<li><strong>2025:</strong> Claude 4, GPT-5, Gemini 2.5 – Vibe-Coding wird zum Mainstream-Paradigma</li>
</ul>

<div class="source"><i class="fas fa-link"></i> Quellen: openai.com/research, deepmind.google, anthropic.com/news – Stand Juli 2025</div>

<h2 id="vc3">3. Wie funktionieren Large Language Models?</h2>
<p>LLMs wie GPT-4, Claude oder Gemini basieren auf der <strong>Transformer-Architektur</strong>. Hier die wichtigsten Konzepte:</p>

<h3>Token & Kontextfenster</h3>
<p>Text wird in <strong>Tokens</strong> zerlegt (ca. 0,75 Wörter pro Token im Englischen). Das <strong>Kontextfenster</strong> bestimmt, wie viel Text das Modell gleichzeitig verarbeiten kann:</p>
<ul>
<li>GPT-4o: 128K Tokens (~96.000 Wörter)</li>
<li>Claude 4: 200K Tokens (~150.000 Wörter)</li>
<li>Gemini 2.5 Pro: 1M Tokens (~750.000 Wörter)</li>
<li>DeepSeek V3: 128K Tokens</li>
</ul>

<h3>Training & Feintuning</h3>
<p>LLMs werden in drei Phasen trainiert:</p>
<ul>
<li><strong>Pre-Training:</strong> Lernen aus riesigen Textmengen (Internet, Bücher, Code-Repositories)</li>
<li><strong>Supervised Fine-Tuning (SFT):</strong> Training mit hochwertigen Frage-Antwort-Paaren</li>
<li><strong>RLHF / Constitutional AI:</strong> Menschliches Feedback verbessert die Qualität und Sicherheit</li>
</ul>

<div class="info-box">
<i class="fas fa-brain" style="color:var(--accent)"></i> <strong>Für Vibe-Coder:</strong> Das Kontextfenster ist entscheidend! Je größer, desto mehr Code kann die KI gleichzeitig verstehen und bearbeiten. Für große Projekte ist Gemini (1M) oder Claude (200K) ideal.
</div>

<h2 id="vc4">4. Vibe-Coding in der Praxis</h2>
<p>Wie funktioniert Vibe-Coding konkret bei der Webentwicklung?</p>

<h3>Typischer Workflow</h3>
<ul>
<li><strong>Schritt 1 – Vision:</strong> Beschreibe deine App-Idee in natürlicher Sprache</li>
<li><strong>Schritt 2 – Scaffolding:</strong> Die KI generiert die Grundstruktur (HTML, CSS, React-Komponenten)</li>
<li><strong>Schritt 3 – Iteration:</strong> "Mach die Navigation sticky", "Füge Dark Mode hinzu", "Optimiere für Mobile"</li>
<li><strong>Schritt 4 – Integration:</strong> API-Anbindungen, Datenbank, Auth – Schritt für Schritt</li>
<li><strong>Schritt 5 – Deployment:</strong> Die KI hilft bei Vercel, Netlify, oder Docker-Konfiguration</li>
</ul>

<h3>Best Practices</h3>
<ul>
<li>Immer <strong>klein anfangen</strong> und schrittweise erweitern</li>
<li><strong>Spezifisch</strong> sein: "Erstelle eine React-Komponente mit Tailwind-CSS, die ein responsives Karten-Layout zeigt" statt "Mach eine Website"</li>
<li>Fehlermeldungen <strong>komplett</strong> in den Chat kopieren