Digitales Verständnis Digitales Verständnis
Digital topics, made understandable.Digitale Themen verständlich einordnen.
Knowledge and workshop platform on digitalisation, AI, and media literacy for social institutions, education providers, and small teams. Companies get a separate path for process and tool consulting. Wissens- und Workshop-Plattform zu Digitalisierung, KI und Medienkompetenz für soziale Einrichtungen, Bildungsträger und kleine Teams. Unternehmen bekommen einen eigenen Pfad für Prozess- und Tool-Beratung.
// challenge // ausgangslage
The launch problem was no longer 'make a speaker site'. The real challenge was building a German-first platform that explains digitalisation, AI, and media literacy clearly for very different audiences: social institutions, education providers, small teams, and companies with operational questions. Each group needed a relevant entry point without the site feeling fragmented or overbuilt. Die Herausforderung war nicht mehr, einfach eine Referenten-Website zu bauen. Die echte Aufgabe war eine German-First-Plattform, die Digitalisierung, KI und Medienkompetenz für sehr unterschiedliche Zielgruppen verständlich macht: soziale Einrichtungen, Bildungsträger, kleine Teams und Unternehmen mit Prozessfragen. Jede Zielgruppe brauchte einen relevanten Einstieg, ohne dass die Website zerfällt oder überladen wirkt.
// approach // vorgehen
The project evolved from a simple education/coaching site into a content-rich understanding platform. Information architecture was rebuilt around five pillars: Themen, Zielgruppen, Wissen, Leistungen, and Selbstcheck. That shift lets workshops, consulting offers, articles, glossary content, and contact paths support each other instead of competing for attention. Built as the sister site to lukasandvoss.com: same core brand system, warmer palette, and a compass motif that visually reinforces orientation and clarity. Astro keeps the public surface fast; interactive pieces are isolated to where they earn their keep, such as navigation, self-check flows, and consent-aware UI.
Das Projekt hat sich von einer einfachen Bildungs-/Coaching-Seite zu einer inhaltsstarken Plattform für Einordnung weiterentwickelt. Die Informationsarchitektur wurde um fünf Säulen neu gebaut: Themen, Zielgruppen, Wissen, Leistungen und Selbstcheck. So unterstützen sich Workshops, Beratungsangebote, Artikel, Glossar-Inhalte und Kontaktpfade gegenseitig, statt um Aufmerksamkeit zu konkurrieren. Gebaut als Schwester-Site zu lukasandvoss.com: gleiches Markenfundament, wärmere Farbwelt und ein Kompass-Motiv als visuelle Übersetzung von Orientierung und Verständlichkeit. Astro hält die öffentliche Oberfläche schnell; Interaktivität sitzt nur dort, wo sie echten Mehrwert liefert, etwa in Navigation, Selbstcheck und consent-abhängiger UI.
// code // code
DSGVO-compliant contact form with honeypot spam protection DSGVO-konformes Kontaktformular mit Honeypot-Spamschutz
typescript// src/pages/api/contact.ts
export const prerender = false;
export const POST: APIRoute = async ({ request }) => {
const data = await request.formData();
// Honeypot: the field exists in HTML but is hidden from real users.
// Bots fill every visible field — this catches them silently.
if (data.get('website')) {
return new Response(null, { status: 204 });
}
const email = data.get('email')?.toString() ?? '';
const nachricht = data.get('nachricht')?.toString() ?? '';
if (!email || !nachricht) {
return Response.json({ error: 'Pflichtfelder fehlen' }, { status: 400 });
}
await resend.emails.send({
from: 'info@lukasandvoss.com',
to: 'luka@lukasandvoss.com',
subject: `Neue Anfrage: ${data.get('thema') ?? 'Allgemein'}`,
text: `Von: ${email}\n\n${nachricht}`,
});
return Response.json({ ok: true });
};No CAPTCHA, no JavaScript required for the honeypot to work. The hidden field is invisible in CSS — real users never fill it, bots always do. Kein CAPTCHA, kein JavaScript für den Honeypot nötig. Das versteckte Feld ist per CSS unsichtbar — echte Nutzer füllen es nie aus, Bots immer.
Shared brand token system across both sites Gemeinsames Brand-Token-System über beide Sites
css/* src/styles/global.css — @theme (Tailwind CSS v4 CSS-first) */
@theme {
/* Shared with lukasandvoss.com — brand bridge */
--color-accent-orange: #f57a00;
--font-display: 'Instrument Serif', serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* digitales-verstaendnis.de — deliberately warmer than the dev portfolio */
--color-bg: #f7f5f0; /* warm cream — not the dark #0a0a0a */
--color-surface: #ffffff;
--color-text: #1a1a2e; /* deep navy — same as portfolio */
--color-accent: #1e6fbf; /* knowledge blue — trust signal */
}Same type stack and orange accent as lukasandvoss.com. Different background and primary accent — the two sites feel related but distinct. One brand, two audiences. Gleicher Type-Stack und Orange-Akzent wie lukasandvoss.com. Anderer Hintergrund und Primär-Akzent — die beiden Sites fühlen sich verwandt, aber unterschiedlich an.
// outcome // ergebnis
Launched at digitales-verstaendnis.de with a full topic and audience architecture: Themen, Zielgruppen, Wissen, Ressourcen, Leistungen, Selbstcheck, Kontakt, and legal pages, plus article publishing, glossary entries, on-site search, structured data, and consent-managed analytics/external media. Launch unter digitales-verstaendnis.de mit vollständiger Themen- und Zielgruppenarchitektur: Themen, Zielgruppen, Wissen, Ressourcen, Leistungen, Selbstcheck, Kontakt und Rechtliches, plus Artikel, Glossar-Einträge, Seitensuche, strukturierte Daten sowie consent-gesteuerte Analytics- und Medien-Einbindungen.
// brand // marke
Audience
Zielgruppe
Social institutions, education providers, and small teams that need practical orientation around digitalisation, AI, and media literacy. Companies are a secondary audience and get a separate process-and-tool consulting path.
Soziale Einrichtungen, Bildungsträger und kleine Teams, die praxisnahe Orientierung zu Digitalisierung, KI und Medienkompetenz brauchen. Unternehmen sind eine sekundäre Zielgruppe und erhalten einen eigenen Beratungs-Pfad für Prozesse und Tools.
Positioning
Positionierung
Not another generic speaker site. Digitales Verständnis positions Luka as someone who translates technical change into practical decisions, workshop formats, and clearer language for people who do not live in tech every day.
Keine generische Referenten-Website. Digitales Verständnis positioniert Luka als jemanden, der technischen Wandel in praktische Entscheidungen, Workshop-Formate und verständliche Sprache für Menschen übersetzt, die nicht jeden Tag in Tech arbeiten.
Tone of Voice
Tonalität
Clear, calm, and credible. Educational without sounding academic. Technically literate without showing off. The copy lowers fear first, then introduces action.
Klar, ruhig und glaubwürdig. Bildungsnah ohne akademisch zu klingen. Technisch versiert ohne Angeberei. Die Sprache senkt zuerst Überforderung und öffnet dann den nächsten Schritt.
Visual Direction
Visual Direction
Warm cream base, blue/orange guidance accents, and a compass motif that signals orientation instead of hype. Editorial spacing, calm rhythm, and structured navigation support the site’s promise to make digital topics understandable.
Warme Cremebasis, blaue und orange Orientierungs-Akzente sowie ein Kompass-Motiv statt KI-Hype-Ästhetik. Redaktionsartige Abstände, ruhiger Rhythmus und strukturierte Navigation stützen das Versprechen, digitale Themen verständlich zu machen.
// stack
- Astro 5
- Tailwind CSS v4
- Framer Motion
- React
- TypeScript
- Resend