2026-04-28 23:35:15 +00:00
<!DOCTYPE html>
< html lang = "de" >
< head >
< meta charset = "utf-8" >
< title > Ava · Awareness & Club-Manager-Coach< / title >
< meta name = "viewport" content = "width=device-width,initial-scale=1,viewport-fit=cover" >
< meta name = "theme-color" content = "#0a0a0f" >
< meta name = "description" content = "Ava — Awareness- und Club-Manager-Coach. Policy, Incident-Response, Haftung, Safer Spaces. Läuft im deutschen Bunker." >
< link rel = "stylesheet" href = "styles.css" >
2026-04-29 02:51:28 +00:00
< script > window . _ _AVA _KEY _ _ = 'qb_cbfx31vpj6z5' ; window . _ _WELCOME _VERSION _ _ = 2 ; < / script >
2026-04-28 23:35:15 +00:00
< / head >
< body >
< div class = "app" role = "application" aria-label = "Ava Awareness-Coach" >
< header class = "topbar" >
< div class = "brand" >
< span class = "brand-icon" aria-hidden = "true" > A< / span >
< span > Ava < small > Awareness & Club-Manager-Coach< / small > < / span >
< / div >
< div class = "spacer" > < / div >
< span class = "status" role = "status" aria-live = "polite" > Online< / span >
< / header >
< nav class = "tabbar" role = "tablist" aria-label = "Modi" >
< button class = "tab" role = "tab" aria-selected = "true" aria-controls = "view-chat" data-mode = "chat" >
Chat
< span class = "tab-kbd" > ⌃1< / span >
< / button >
< button class = "tab" role = "tab" aria-selected = "false" aria-controls = "view-quiz" data-mode = "quiz" >
Quiz
< span class = "tab-kbd" > ⌃2< / span >
< / button >
< button class = "tab" role = "tab" aria-selected = "false" aria-controls = "view-flash" data-mode = "flash" >
Flashcards
< span class = "tab-kbd" > ⌃3< / span >
< / button >
< button class = "tab" role = "tab" aria-selected = "false" aria-controls = "view-progress" data-mode = "progress" >
Fortschritt
< span class = "tab-kbd" > ⌃4< / span >
< / button >
< button class = "tab" role = "tab" aria-selected = "false" aria-controls = "view-curriculum" data-mode = "curriculum" >
Policy-Bibliothek
< span class = "tab-kbd" > ⌃5< / span >
< / button >
< / nav >
< main class = "main" >
<!-- CHAT -->
< section id = "view-chat" class = "view" role = "tabpanel" aria-labelledby = "tab-chat" data-active = "true" >
< div id = "welcome-screen" class = "welcome hidden" aria-hidden = "true" >
< style >
/* Ava — Welcome polish (scoped to .welcome, only this bot) */
#welcome-screen.welcome {
display: block;
text-align: left;
padding: 0 !important;
min-height: auto !important;
max-width: 920px;
margin: 0 auto;
}
#welcome-screen.welcome > h2,
#welcome-screen.welcome > p {
display: none; /* hide default */
}
.ava-hero {
position: relative;
border-radius: 20px;
padding: 2.2rem 2rem 1.9rem;
margin: .25rem 0 1.4rem;
background:
radial-gradient(1200px 240px at 0% 0%, rgba(124,58,237,0.32), transparent 60%),
radial-gradient(900px 200px at 100% 100%, rgba(245,158,11,0.18), transparent 60%),
linear-gradient(160deg, #14101e 0%, #0d0a17 60%, #0a0a0f 100%);
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
isolation: isolate;
}
.ava-hero::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 3px 3px;
opacity: .25;
pointer-events: none;
mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 70%);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 70%);
}
.ava-hero::after {
content: "";
position: absolute;
top: -40%; right: -20%;
width: 480px; height: 480px;
background: radial-gradient(closest-side, rgba(168,85,247,0.22), transparent 70%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
}
.ava-hero > * { position: relative; z-index: 1; }
.ava-eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: #cbb8ff;
background: rgba(124,58,237,0.12);
border: 1px solid rgba(124,58,237,0.32);
padding: .28rem .65rem;
border-radius: 999px;
font-weight: 600;
}
.ava-eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: #a855f7;
box-shadow: 0 0 10px #a855f7;
}
.ava-title {
margin: .85rem 0 .35rem;
font-size: clamp(1.55rem, 3vw, 2.05rem);
letter-spacing: -0.025em;
line-height: 1.15;
font-weight: 800;
background: linear-gradient(120deg, #f5f3ff 0%, #c4b5fd 45%, #fcd34d 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ava-sub {
color: #c8c5d4;
font-size: 1rem;
line-height: 1.55;
margin: 0 0 1.1rem;
max-width: 60ch;
}
.ava-sub strong { color: #ede9fe; font-weight: 600; }
.ava-trust {
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin-top: .25rem;
}
.ava-trust .badge {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .35rem .7rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
font-size: .76rem;
color: #d4d2de;
}
.ava-trust .badge svg {
width: 14px; height: 14px; flex: none;
color: #a855f7;
}
.ava-trust .badge.amber svg { color: #fbbf24; }
.ava-trust .badge.teal svg { color: #5eead4; }
/* Use-case grid */
.ava-uc {
margin-bottom: 1.5rem;
}
.ava-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: .25rem .25rem .65rem;
gap: 1rem;
}
.ava-section-head h3 {
font-size: .92rem;
letter-spacing: -.005em;
font-weight: 600;
color: #ede9fe;
margin: 0;
}
.ava-section-head .hint {
font-size: .76rem;
color: var(--text-mute);
}
.uc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .65rem;
}
.uc-card {
position: relative;
text-align: left;
background: linear-gradient(165deg, #16131f 0%, #110f19 100%);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
padding: .95rem 1rem 1rem;
cursor: pointer;
font-family: inherit;
color: inherit;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
overflow: hidden;
}
.uc-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(124,58,237,0.0), rgba(245,158,11,0.0));
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
}
.uc-card:hover {
transform: translateY(-2px);
border-color: rgba(124,58,237,0.45);
background: linear-gradient(165deg, #1c1729 0%, #16131f 100%);
}
.uc-card:hover::before { opacity: 1; background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(245,158,11,0.05)); }
.uc-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.uc-icon {
width: 34px; height: 34px;
display: grid; place-items: center;
border-radius: 10px;
background: linear-gradient(140deg, rgba(124,58,237,0.18), rgba(245,158,11,0.10));
border: 1px solid rgba(124,58,237,0.32);
color: #ddd6fe;
margin-bottom: .65rem;
}
.uc-icon svg { width: 18px; height: 18px; }
.uc-card.amber .uc-icon { background: linear-gradient(140deg, rgba(245,158,11,0.22), rgba(124,58,237,0.10)); border-color: rgba(245,158,11,0.32); color: #fde68a; }
.uc-card.teal .uc-icon { background: linear-gradient(140deg, rgba(94,234,212,0.18), rgba(124,58,237,0.10)); border-color: rgba(94,234,212,0.32); color: #99f6e4; }
.uc-card.rose .uc-icon { background: linear-gradient(140deg, rgba(244,114,182,0.16), rgba(124,58,237,0.10)); border-color: rgba(244,114,182,0.30); color: #fbcfe8; }
.uc-card h4 {
margin: 0 0 .25rem;
font-size: .94rem;
letter-spacing: -.01em;
font-weight: 600;
color: #f1f0f5;
}
.uc-card p {
margin: 0;
font-size: .8rem;
line-height: 1.45;
color: var(--text-dim);
}
.uc-card .uc-tag {
display: inline-block;
margin-top: .55rem;
font-size: .68rem;
letter-spacing: .04em;
text-transform: uppercase;
color: #a78bfa;
font-weight: 600;
}
.uc-card.amber .uc-tag { color: #fbbf24; }
.uc-card.teal .uc-tag { color: #5eead4; }
.uc-card.rose .uc-tag { color: #f9a8d4; }
/* Compact mode-row (the old big mode-cards become a thin strip) */
.ava-modes { margin-top: .5rem; }
.mode-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: .5rem;
}
.mode-pill {
display: flex;
align-items: center;
gap: .55rem;
padding: .65rem .8rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
cursor: pointer;
font-family: inherit;
color: inherit;
text-align: left;
font-size: .85rem;
transition: background .15s, border-color .15s, transform .15s;
}
.mode-pill:hover {
background: rgba(124,58,237,0.10);
border-color: rgba(124,58,237,0.4);
transform: translateY(-1px);
}
.mode-pill svg { width: 16px; height: 16px; color: #a78bfa; flex: none; }
.mode-pill .label { font-weight: 600; color: #f1f0f5; }
.mode-pill .sub { color: var(--text-mute); font-size: .72rem; display: block; margin-top: 1px; }
.ava-foot {
margin-top: 1.4rem;
padding-top: .9rem;
border-top: 1px dashed rgba(255,255,255,0.08);
font-size: .76rem;
color: var(--text-mute);
line-height: 1.55;
}
.ava-foot strong { color: #ddd6fe; font-weight: 600; }
@media (max-width: 640px) {
.ava-hero { padding: 1.6rem 1.25rem 1.4rem; border-radius: 16px; }
.ava-title { font-size: 1.45rem; }
.ava-sub { font-size: .92rem; }
.uc-grid { grid-template-columns: 1fr; }
.mode-row { grid-template-columns: repeat(2, 1fr); }
}
< / style >
< section class = "ava-hero" aria-labelledby = "ava-hero-title" >
< span class = "ava-eyebrow" > < span class = "dot" > < / span > Sovereign AI · Bunker Schleswig-Holstein< / span >
< h2 id = "ava-hero-title" class = "ava-title" > Hi, ich bin Ava — Awareness & Club-Manager-Coach.< / h2 >
< p class = "ava-sub" >
Ich helfe dir, deine Location < strong > sicher, inklusiv und rechtsfest< / strong > zu führen — von der Awareness-Policy über Incident-Response bis zu Veranstalter-Haftung und Krisen-PR. < strong > Safer Spaces entstehen durch klare Strukturen, nicht durch Zufall.< / strong >
< / p >
< div class = "ava-trust" >
< span class = "badge" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" / > < / svg >
Inferenz im deutschen Bunker
< / span >
< span class = "badge teal" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M9 12l2 2 4-4" / > < circle cx = "12" cy = "12" r = "10" / > < / svg >
DSGVO & AI-Act-konform
< / span >
< span class = "badge amber" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < circle cx = "12" cy = "12" r = "10" / > < path d = "M12 6v6l4 2" / > < / svg >
45-Sekunden-Spawn pro Org
< / span >
< / div >
< / section >
< section class = "ava-uc" aria-labelledby = "ava-uc-head" >
< div class = "ava-section-head" >
< h3 id = "ava-uc-head" > Konkret unterstütze ich dich bei …< / h3 >
< span class = "hint" > Klick → Frage landet im Chat< / span >
< / div >
< div class = "uc-grid" >
< button class = "uc-card" data-prompt = "Wir planen ein Festival in 4 Monaten (ca. 3.000 Gäste, 2 Tage). Welche Awareness-Bausteine brauchen wir minimum, und in welcher Reihenfolge sollten wir sie aufsetzen?" >
< div class = "uc-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M3 21V8l9-5 9 5v13" / > < path d = "M9 21V12h6v9" / > < / svg >
< / div >
< h4 > Festival-Saison vorbereiten< / h4 >
< p > Awareness-Konzept, Team-Recruiting, Briefing-Pakete und Sicherheits-Schnittstellen vor Saisonstart.< / p >
< span class = "uc-tag" > Veranstalter< / span >
< / button >
< button class = "uc-card rose" data-prompt = "Heute Nacht hat eine Gästin sexualisierte Belästigung an der Bar gemeldet. Awareness-Team hat erstes Gespräch geführt. Was sind die nächsten 24 Stunden — Doku, Personalentscheidung, Kommunikation?" >
< div class = "uc-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M12 9v4" / > < path d = "M12 17h.01" / > < path d = "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" / > < / svg >
< / div >
< h4 > Vorfall passiert — was jetzt?< / h4 >
< p > Incident-Response Schritt für Schritt: Erstgespräch, Doku, Polizei?, Personal, Kommunikation in den nächsten 24 h.< / p >
< span class = "uc-tag" > Akut< / span >
< / button >
< button class = "uc-card" data-prompt = "Ich eröffne in 6 Wochen einen Club. Wie schreibe ich eine AGG-konforme Hausordnung und eine sinnvolle Türkommunikation, ohne mich als Veranstalter angreifbar zu machen?" >
< div class = "uc-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" / > < polyline points = "14 2 14 8 20 8" / > < line x1 = "9" y1 = "13" x2 = "15" y2 = "13" / > < line x1 = "9" y1 = "17" x2 = "15" y2 = "17" / > < / svg >
< / div >
< h4 > Hausordnung & Türpolitik< / h4 >
< p > AGG-konforme Hausordnung, Türkommunikation, Aushänge — mit konkreten Formulierungen statt Goodwill.< / p >
< span class = "uc-tag" > Eröffnung< / span >
< / button >
< button class = "uc-card amber" data-prompt = "Auf Instagram macht seit 3 Stunden ein Vorwurf gegen unsere Location die Runde — angeblich übergriffiges Türpersonal. Wie reagieren wir die nächsten 48 Stunden, was sagen wir öffentlich, was intern?" >
< div class = "uc-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M3 11l18-5v12L3 14v-3z" / > < path d = "M11.6 16.8a3 3 0 1 1-5.8-1.6" / > < / svg >
< / div >
< h4 > Krisenkommunikation< / h4 >
< p > Statement nach Vorfall, Social-Media-Reaktion, Crew-Kommunikation — was sagen, was lassen, in welcher Reihenfolge.< / p >
< span class = "uc-tag" > Öffentlichkeit< / span >
< / button >
< button class = "uc-card" data-prompt = "Welche rechtlichen Pflichten habe ich als Veranstalter:in bei sicherheitsrelevanten Vorfällen — was muss ich melden, dokumentieren, versichern? Inklusive Verkehrssicherungspflicht und Anzeigepflichten." >
< div class = "uc-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M3 6l9-3 9 3v6c0 5-4 8-9 10-5-2-9-5-9-10V6z" / > < path d = "M9 12l2 2 4-4" / > < / svg >
< / div >
< h4 > Recht & Haftung< / h4 >
< p > Veranstalter-Pflichten, Anzeige- und Doku-Pflichten, Versicherungs-Logik — mit § und Praxis-Bezug.< / p >
< span class = "uc-tag" > Recht< / span >
< / button >
< button class = "uc-card teal" data-prompt = "Wir wollen ein Awareness-Team aufbauen — 6-8 Leute, Schichtbetrieb. Wo fangen wir an: Recruiting-Kanäle, Auswahl, Schulung, Schichtmodell, Vergütung, rechtlicher Status?" >
< div class = "uc-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" / > < circle cx = "9" cy = "7" r = "4" / > < path d = "M23 21v-2a4 4 0 0 0-3-3.87" / > < path d = "M16 3.13a4 4 0 0 1 0 7.75" / > < / svg >
< / div >
< h4 > Awareness-Team aufbauen< / h4 >
< p > Recruiting-Kanäle, Auswahl, Schulung, Schichtmodell, Vergütung — von 0 auf einsatzfähig in 8 Wochen.< / p >
< span class = "uc-tag" > Personal< / span >
< / button >
< button class = "uc-card" data-prompt = "Zwischen Awareness-Team und Security gibt es ständig Reibung — Security will durchgreifen, Awareness will hören. Wie strukturiere ich Joint-Briefings und kläre Mandate, ohne dass ein Team das andere übergeht?" >
< div class = "uc-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" / > < / svg >
< / div >
< h4 > Konflikt im Team< / h4 >
< p > Awareness ↔ Security, Schichtleiter-Streit, Mitarbeiter-Trennung — Eskalations- und Gesprächsstruktur.< / p >
< span class = "uc-tag" > Führung< / span >
< / button >
< button class = "uc-card amber" data-prompt = "Wie gehe ich pragmatisch mit Drogenkonsum am Tresen und im Backstage um — ohne Rechtsbruch und ohne die Branchenrealität zu ignorieren? Inklusive Notfall-Kette, Tür-Politik und Awareness-Schnittstelle." >
< div class = "uc-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < circle cx = "12" cy = "12" r = "10" / > < path d = "M12 8v4l3 2" / > < / svg >
< / div >
< h4 > Harm Reduction< / h4 >
< p > Drogenkonsum in der Realität: Notfall-Kette, Türentscheidungen, Awareness-Schnittstelle — ohne § zu verletzen.< / p >
< span class = "uc-tag" > Pragmatik< / span >
< / button >
< / div >
< / section >
< section class = "ava-modes" aria-labelledby = "ava-modes-head" >
< div class = "ava-section-head" >
< h3 id = "ava-modes-head" > Oder direkt in einen Modus springen:< / h3 >
< span class = "hint" > Tabs ⌃1– < / span >
< / div >
< div class = "mode-row" >
< button class = "mode-pill" data-goto = "chat" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" / > < / svg >
< span > < span class = "label" > Chat< / span > < span class = "sub" > Frei fragen< / span > < / span >
< / button >
< button class = "mode-pill" data-goto = "quiz" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" / > < path d = "M12 17h.01" / > < circle cx = "12" cy = "12" r = "10" / > < / svg >
< span > < span class = "label" > Quiz< / span > < span class = "sub" > Szenarien · 16 Module< / span > < / span >
< / button >
< button class = "mode-pill" data-goto = "flash" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < rect x = "3" y = "4" width = "18" height = "16" rx = "2" / > < path d = "M3 10h18" / > < / svg >
< span > < span class = "label" > Flashcards< / span > < span class = "sub" > Spaced-Repetition< / span > < / span >
< / button >
< button class = "mode-pill" data-goto = "progress" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < polyline points = "22 12 18 12 15 21 9 3 6 12 2 12" / > < / svg >
< span > < span class = "label" > Fortschritt< / span > < span class = "sub" > XP · Streaks · Badges< / span > < / span >
< / button >
< button class = "mode-pill" data-goto = "curriculum" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" > < path d = "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" / > < path d = "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" / > < / svg >
< span > < span class = "label" > Bibliothek< / span > < span class = "sub" > 8 Curricula · 16 Module< / span > < / span >
< / button >
< / div >
< / section >
< p class = "ava-foot" >
< strong > Wie ich arbeite:< / strong > Chat zum Verstehen → Quiz zum Testen → Flashcards zum Merken → Case-Requests im Chat für Rollenspiele auf Führungsebene. Quellen sind kuratiert (Clubcommission, Awareness-Akademie, AGG, BGB, StGB, OWiG); ich erfinde keine Paragraphen — wenn ich unsicher bin, sag ich's.
< / p >
< / div >
< div id = "chat-box" class = "chat-box" aria-live = "polite" aria-label = "Gespräch" > < / div >
< / section >
<!-- QUIZ -->
< section id = "view-quiz" class = "view" role = "tabpanel" aria-labelledby = "tab-quiz" >
< div id = "quiz-host" > < / div >
< / section >
<!-- FLASHCARDS -->
< section id = "view-flash" class = "view" role = "tabpanel" aria-labelledby = "tab-flash" >
< div id = "flash-host" > < / div >
< / section >
<!-- PROGRESS -->
< section id = "view-progress" class = "view" role = "tabpanel" aria-labelledby = "tab-progress" >
< div id = "progress-host" > < / div >
< / section >
<!-- CURRICULUM -->
< section id = "view-curriculum" class = "view" role = "tabpanel" aria-labelledby = "tab-curr" >
< div id = "curr-host" > < / div >
< / section >
< / main >
< form id = "composer-form" class = "composer" aria-label = "Nachricht verfassen" >
< div id = "attach-strip" class = "attach-strip" aria-live = "polite" > < / div >
< div class = "composer-row" >
< button type = "button" class = "btn-attach" id = "composer-attach" aria-label = "Datei anhängen" title = "Datei anhängen (PDF, Bild, Text — max 5 Dateien, 8 MB)" > 📎< / button >
< input type = "file" id = "composer-file" multiple accept = ".pdf,.txt,.md,.csv,.json,.xml,.yaml,.yml,.log,.png,.jpg,.jpeg,.webp,.gif" hidden >
< textarea id = "composer" rows = "1" placeholder = "Frag Ava — Enter zum Senden, Shift+Enter für Zeilenumbruch" aria-label = "Nachricht" > < / textarea >
< button type = "submit" class = "btn-primary" id = "composer-send" > Senden< / button >
< / div >
< / form >
< footer class = "footer" >
Sovereign AI · Deutscher Bunker · < a href = "https://qognio.com" > Qognio< / a > · DSGVO-konform · Keine externen Fonts · Keine Cookies
< / footer >
< / div >
< div id = "toast-stack" class = "toast-stack" aria-live = "polite" > < / div >
< script src = "app.js" > < / script >
< / body >
< / html >
