Redesign homepage as single-page site with new dark/gold branding

Replaces the previous multi-page structure (Startseite, Leistungen,
Über uns, Kontakt) with one long-form page covering pricing, work
samples, process and FAQ, matching the new visual identity (dark
theme, serif display type, sage-green logo mark). Old routes now
redirect to the corresponding anchors. Adds Impressum and Datenschutz
stub pages with clearly marked placeholders for the still-missing
real content (contact details, founder bios, portfolio, pricing
specifics).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

astro.config.mjs

@@ -2,4 +2,9 @@ import { defineConfig } from 'astro/config';
 
 export default defineConfig({
   site: 'https://larpaso.de',
+  redirects: {
+    '/leistungen': '/#leistungen',
+    '/ueber-uns': '/#kontakt',
+    '/kontakt': '/#kontakt',
+  },
 });

src/components/Footer.astro

@@ -3,76 +3,34 @@ const year = new Date().getFullYear();
 ---
 
 <footer class="footer">
-  <div class="container footer-inner">
+  <div class="container footer-bottom">
-    <div class="footer-brand">
+    <p>
-      <p class="footer-logo">Larpaso</p>
+      &copy; {year} larpaso · Individuelle Websites, KI-gestützt entwickelt · Lara
-      <p class="footer-tagline">Individuelle Websites, KI-gestützt entwickelt.</p>
+      {' '}<span class="placeholder">[Nachname]</span> und Pascal <span class="placeholder">[Nachname]</span>
-    </div>
+    </p>
 
     <nav class="footer-nav" aria-label="Footer-Navigation">
-      <a href="/">Startseite</a>
+      <a href="/impressum">Impressum</a>
-      <a href="/leistungen">Leistungen</a>
+      <a href="/datenschutz">Datenschutz</a>
-      <a href="/ueber-uns">Über uns</a>
+      <a href="#kontakt">Kontakt</a>
-      <a href="/kontakt">Kontakt</a>
     </nav>
-
-    <div class="footer-contact">
-      <a href="mailto:kontakt@larpaso.de">kontakt@larpaso.de</a>
-    </div>
-  </div>
-
-  <div class="container footer-bottom">
-    <p>&copy; {year} Larpaso. Alle Rechte vorbehalten.</p>
   </div>
 </footer>
 
 <style>
   .footer {
-    background: var(--color-surface);
+    background: var(--color-bg);
     border-top: 1px solid var(--color-border);
     margin-top: var(--space-8);
   }
 
-  .footer-inner {
+  .footer-bottom {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    gap: var(--space-6);
+    align-items: center;
-    padding-block: var(--space-7);
+    gap: var(--space-4);
-  }
+    padding-block: var(--space-6);
-
-  .footer-logo {
-    font-weight: var(--font-weight-bold);
-    color: var(--color-text);
-    margin-bottom: var(--space-2);
-  }
-
-  .footer-tagline {
-    font-size: var(--font-size-sm);
-    margin: 0;
-    max-width: 20rem;
-  }
-
-  .footer-nav {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .footer-nav a,
-  .footer-contact a {
-    color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
-  }
-
-  .footer-nav a:hover,
-  .footer-contact a:hover {
-    color: var(--color-primary);
-  }
-
-  .footer-bottom {
-    border-top: 1px solid var(--color-border);
-    padding-block: var(--space-4);
   }
 
   .footer-bottom p {
@@ -81,9 +39,24 @@ const year = new Date().getFullYear();
     color: var(--color-text-muted);
   }
 
+  .footer-nav {
+    display: flex;
+    gap: var(--space-5);
+  }
+
+  .footer-nav a {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+  }
+
+  .footer-nav a:hover {
+    color: var(--color-primary);
+  }
+
   @media (max-width: 720px) {
-    .footer-inner {
+    .footer-bottom {
       flex-direction: column;
+      align-items: flex-start;
     }
   }
 </style>

src/components/Nav.astro

@@ -1,17 +1,18 @@
 ---
 const navItems = [
-  { href: '/', label: 'Startseite' },
+  { href: '#warum', label: 'Warum' },
-  { href: '/leistungen', label: 'Leistungen' },
+  { href: '#leistungen', label: 'Leistungen' },
-  { href: '/ueber-uns', label: 'Über uns' },
+  { href: '#arbeiten', label: 'Arbeiten' },
-  { href: '/kontakt', label: 'Kontakt' },
+  { href: '#ablauf', label: 'Ablauf' },
+  { href: '#preis', label: 'Preis' },
 ];
-
-const currentPath = Astro.url.pathname.replace(/\/$/, '') || '/';
 ---
 
 <header class="nav">
   <div class="container nav-inner">
-    <a href="/" class="nav-logo">Larpaso</a>
+    <a href="/" class="nav-logo">
+      <img src="/logo.jpg" alt="larpaso Webdesign" width="320" height="60" class="nav-logo-img" />
+    </a>
 
     <input type="checkbox" id="nav-toggle" class="nav-toggle-checkbox" />
     <label for="nav-toggle" class="nav-toggle" aria-label="Menü öffnen/schließen">
@@ -22,27 +23,20 @@ const currentPath = Astro.url.pathname.replace(/\/$/, '') || '/';
 
     <nav class="nav-links" aria-label="Hauptnavigation">
       <ul>
-        {navItems.map((item) => {
+        {navItems.map((item) => (
-          const isActive =
+          <li>
-            item.href === '/'
+            <a href={item.href}>{item.label}</a>
-              ? currentPath === '/'
+          </li>
-              : currentPath.startsWith(item.href);
+        ))}
-          return (
-            <li>
-              <a href={item.href} aria-current={isActive ? 'page' : undefined}>
-                {item.label}
-              </a>
-            </li>
-          );
-        })}
       </ul>
+      <a class="btn btn-primary nav-cta" href="#kontakt">Projekt anfragen</a>
     </nav>
   </div>
 </header>
 
 <style>
   .nav {
-    background: var(--color-surface);
+    background: var(--color-bg);
     border-bottom: 1px solid var(--color-border);
     position: sticky;
     top: 0;
@@ -57,14 +51,24 @@ const currentPath = Astro.url.pathname.replace(/\/$/, '') || '/';
   }
 
   .nav-logo {
-    font-weight: var(--font-weight-bold);
+    display: flex;
-    font-size: var(--font-size-md);
+    align-items: center;
-    color: var(--color-text);
+    gap: var(--space-3);
   }
 
   .nav-logo:hover {
     text-decoration: none;
-    color: var(--color-primary);
+  }
+
+  .nav-logo-img {
+    height: 3.5rem;
+    width: auto;
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
   }
 
   .nav-links ul {
@@ -80,13 +84,16 @@ const currentPath = Astro.url.pathname.replace(/\/$/, '') || '/';
     font-size: var(--font-size-sm);
   }
 
-  .nav-links a:hover {
+  .nav-links ul a:hover {
     color: var(--color-primary);
     text-decoration: none;
   }
 
-  .nav-links a[aria-current='page'] {
+  .nav-cta {
-    color: var(--color-primary);
+    font-size: var(--font-size-sm);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: var(--space-3) var(--space-5);
   }
 
   .nav-toggle-checkbox {
@@ -110,7 +117,7 @@ const currentPath = Astro.url.pathname.replace(/\/$/, '') || '/';
     border-radius: 1px;
   }
 
-  @media (max-width: 720px) {
+  @media (max-width: 900px) {
     .nav-toggle {
       display: flex;
     }
@@ -121,16 +128,23 @@ const currentPath = Astro.url.pathname.replace(/\/$/, '') || '/';
       top: 100%;
       left: 0;
       right: 0;
-      background: var(--color-surface);
+      background: var(--color-bg);
       border-bottom: 1px solid var(--color-border);
       box-shadow: var(--shadow-md);
     }
 
+    .nav-links {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-4);
+      padding: var(--space-4) var(--container-padding) var(--space-5);
+    }
+
     .nav-links ul {
       flex-direction: column;
       align-items: flex-start;
       gap: 0;
-      padding: var(--space-4) var(--container-padding);
+      width: 100%;
     }
 
     .nav-links li {
@@ -139,12 +153,8 @@ const currentPath = Astro.url.pathname.replace(/\/$/, '') || '/';
       border-bottom: 1px solid var(--color-border);
     }
 
-    .nav-links li:last-child {
-      border-bottom: none;
-    }
-
     .nav-toggle-checkbox:checked ~ .nav-links {
-      display: block;
+      display: flex;
     }
   }
 </style>

src/layouts/Layout.astro

@@ -26,7 +26,7 @@ const {
     <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@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap"
       rel="stylesheet"
     />
   </head>

src/pages/datenschutz.astro

@@ -0,0 +1,55 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Datenschutz" description="Datenschutzerklärung von larpaso.">
+  <section class="section-tight">
+    <div class="container legal">
+      <p class="eyebrow">Datenschutz</p>
+      <h1>Datenschutzerklärung</h1>
+
+      <p class="placeholder">
+        [Diese Seite ist noch ein Platzhalter. Vor dem Livegang durch eine vollständige, rechtlich
+        geprüfte Datenschutzerklärung ersetzen — u. a. mit Angaben zu: verantwortlicher Stelle,
+        Kontaktformular/Mailto-Versand, ggf. eingesetzten Diensten (Hosting, Schriftarten,
+        Analyse-Tools), Speicherdauer und Betroffenenrechten.]
+      </p>
+
+      <h2>Verantwortliche Stelle</h2>
+      <p class="placeholder">
+        [Name / Firmenname, Anschrift, E-Mail — noch zu ergänzen]
+      </p>
+
+      <h2>Kontaktformular</h2>
+      <p>
+        Das Kontaktformular auf dieser Website öffnet beim Absenden Ihr E-Mail-Programm mit einem
+        vorausgefüllten Entwurf. Ihre Angaben werden dabei direkt an
+        <a href="mailto:kontakt@larpaso.de">kontakt@larpaso.de</a> adressiert und nicht an einen
+        Server dieser Website oder Dritte übertragen.
+      </p>
+
+      <p class="legal-note">
+        Diese Datenschutzerklärung ist noch nicht vollständig und muss vor dem Livegang ergänzt
+        bzw. rechtlich geprüft werden.
+      </p>
+    </div>
+  </section>
+</Layout>
+
+<style>
+  .legal {
+    max-width: 40rem;
+  }
+
+  .legal h2 {
+    margin-top: var(--space-7);
+  }
+
+  .legal-note {
+    margin-top: var(--space-8);
+    padding-top: var(--space-5);
+    border-top: 1px solid var(--color-border);
+    font-size: var(--font-size-sm);
+    color: var(--color-flag);
+  }
+</style>

src/pages/impressum.astro

@@ -0,0 +1,58 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Impressum" description="Impressum von larpaso.">
+  <section class="section-tight">
+    <div class="container legal">
+      <p class="eyebrow">Impressum</p>
+      <h1>Angaben gemäß § 5 TMG</h1>
+
+      <p class="placeholder">
+        [Vollständiger Name / Firmenname, Rechtsform falls vorhanden — noch zu ergänzen]<br />
+        [Straße und Hausnummer — noch zu ergänzen]<br />
+        [PLZ und Ort — noch zu ergänzen]
+      </p>
+
+      <h2>Kontakt</h2>
+      <p>
+        E-Mail: <a href="mailto:kontakt@larpaso.de">kontakt@larpaso.de</a><br />
+        Telefon: <span class="placeholder">[Telefonnummer eintragen]</span>
+      </p>
+
+      <h2>Umsatzsteuer-ID</h2>
+      <p class="placeholder">
+        [Falls vorhanden: Umsatzsteuer-Identifikationsnummer gemäß § 27a UStG — sonst Absatz
+        entfernen]
+      </p>
+
+      <h2>Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV</h2>
+      <p class="placeholder">
+        [Name, Anschrift wie oben — noch zu ergänzen]
+      </p>
+
+      <p class="legal-note">
+        Dieses Impressum ist noch nicht vollständig und muss vor dem Livegang mit den echten
+        Angaben ergänzt werden.
+      </p>
+    </div>
+  </section>
+</Layout>
+
+<style>
+  .legal {
+    max-width: 40rem;
+  }
+
+  .legal h2 {
+    margin-top: var(--space-7);
+  }
+
+  .legal-note {
+    margin-top: var(--space-8);
+    padding-top: var(--space-5);
+    border-top: 1px solid var(--color-border);
+    font-size: var(--font-size-sm);
+    color: var(--color-flag);
+  }
+</style>

src/pages/kontakt.astro

@@ -1,113 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
----
-
-<Layout
-  title="Kontakt"
-  description="Nehmen Sie Kontakt mit Larpaso auf und erzählen Sie uns von Ihrem Website-Projekt."
->
-  <section class="section-tight">
-    <div class="container contact-layout">
-      <div class="contact-intro">
-        <p class="eyebrow">Kontakt</p>
-        <h1>Lassen Sie uns sprechen.</h1>
-        <p class="text-lead">
-          Erzählen Sie uns kurz von Ihrem Projekt – wir melden uns zeitnah bei Ihnen zurück.
-          Ein Erstgespräch ist unverbindlich und kostet Sie nichts.
-        </p>
-
-        <div class="contact-detail">
-          <h3>Direkt erreichbar</h3>
-          <p><a href="mailto:kontakt@larpaso.de">kontakt@larpaso.de</a></p>
-        </div>
-      </div>
-
-      <form class="contact-form card" aria-label="Kontaktformular">
-        <div class="form-field">
-          <label for="name">Name</label>
-          <input type="text" id="name" name="name" placeholder="Ihr Name" required />
-        </div>
-
-        <div class="form-field">
-          <label for="email">E-Mail</label>
-          <input type="email" id="email" name="email" placeholder="ihre.email@beispiel.de" required />
-        </div>
-
-        <div class="form-field">
-          <label for="message">Nachricht</label>
-          <textarea
-            id="message"
-            name="message"
-            rows="6"
-            placeholder="Erzählen Sie uns von Ihrem Projekt …"
-            required
-          ></textarea>
-        </div>
-
-        <button type="submit" class="btn btn-primary form-submit">Nachricht senden</button>
-        <p class="form-note">
-          Hinweis: Dieses Formular ist aktuell nur als Struktur angelegt und noch nicht an ein
-          Backend angebunden.
-        </p>
-      </form>
-    </div>
-  </section>
-</Layout>
-
-<style>
-  .contact-layout {
-    display: grid;
-    grid-template-columns: 1fr 1.2fr;
-    gap: var(--space-8);
-    align-items: start;
-  }
-
-  .contact-detail {
-    margin-top: var(--space-6);
-  }
-
-  .contact-detail h3 {
-    margin-bottom: var(--space-2);
-  }
-
-  .contact-form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-5);
-  }
-
-  .form-field input,
-  .form-field textarea {
-    width: 100%;
-    padding: var(--space-3) var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    background: var(--color-bg);
-    color: var(--color-text);
-  }
-
-  .form-field input:focus,
-  .form-field textarea:focus {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 1px;
-  }
-
-  .form-field textarea {
-    resize: vertical;
-  }
-
-  .form-submit {
-    align-self: flex-start;
-  }
-
-  .form-note {
-    font-size: var(--font-size-sm);
-    margin: 0;
-  }
-
-  @media (max-width: 800px) {
-    .contact-layout {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>

src/pages/leistungen.astro

@@ -1,87 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-
-const services = [
-  {
-    title: 'Individuelle Websites',
-    text: 'Konzeption und Umsetzung von Websites, die auf Ihr Unternehmen, Ihre Zielgruppe und Ihre Ziele zugeschnitten sind – von der einfachen Unternehmenspräsenz bis zur komplexeren Webanwendung.',
-  },
-  {
-    title: 'KI-gestützte Entwicklung',
-    text: 'Wir nutzen moderne KI-Werkzeuge gezielt im Entwicklungsprozess, um Umsetzungszeiten zu verkürzen und gleichzeitig Code-Qualität und Sorgfalt hochzuhalten.',
-  },
-  {
-    title: 'Konzeption & Beratung',
-    text: 'Vor der Umsetzung klären wir Struktur, Inhalte und technische Anforderungen – damit die Website von Anfang an zu Ihren Zielen passt.',
-  },
-  {
-    title: 'Redesign & Weiterentwicklung',
-    text: 'Bestehende Websites überarbeiten, modernisieren oder um neue Funktionen erweitern – technisch fundiert und mit klarem Fokus auf Nutzbarkeit.',
-  },
-  {
-    title: 'Wartung & Support',
-    text: 'Nach dem Launch lassen wir Sie nicht allein: Updates, kleinere Anpassungen und technischer Support nach Bedarf.',
-  },
-  {
-    title: 'Performance & Zugänglichkeit',
-    text: 'Websites, die schnell laden und für möglichst viele Nutzerinnen und Nutzer gut zugänglich sind – als Grundlage, nicht als nachträgliches Extra.',
-  },
-];
----
-
-<Layout
-  title="Leistungen"
-  description="Individuelle Websites, KI-gestützte Entwicklung, Beratung und Support – die Leistungen von Larpaso im Überblick."
->
-  <section class="section-tight">
-    <div class="container">
-      <p class="eyebrow">Leistungen</p>
-      <h1>Was wir für Sie tun können</h1>
-      <p class="text-lead">
-        Von der ersten Idee bis zur laufenden Betreuung: Larpaso begleitet Ihr Website-Projekt
-        mit individueller Entwicklung und dem gezielten Einsatz von KI-Werkzeugen.
-      </p>
-    </div>
-  </section>
-
-  <section class="section-tight">
-    <div class="container">
-      <div class="grid grid-3">
-        {services.map((service) => (
-          <div class="card">
-            <h3>{service.title}</h3>
-            <p>{service.text}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  </section>
-
-  <section class="section-tight cta">
-    <div class="container cta-inner">
-      <h2>Passt das zu Ihrem Projekt?</h2>
-      <p class="text-lead">Schreiben Sie uns kurz, worum es geht – wir melden uns zeitnah zurück.</p>
-      <a class="btn btn-primary" href="/kontakt">Kontakt aufnehmen</a>
-    </div>
-  </section>
-</Layout>
-
-<style>
-  .cta {
-    background: var(--color-surface);
-    border-top: 1px solid var(--color-border);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .cta-inner {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-2);
-  }
-
-  .cta-inner .text-lead {
-    margin-bottom: var(--space-4);
-  }
-</style>

src/pages/ueber-uns.astro

@@ -1,87 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-
-const values = [
-  {
-    title: 'Individualität statt Schema F',
-    text: 'Jedes Projekt bekommt eine Lösung, die zu den tatsächlichen Anforderungen passt – statt eines starren Baukastens.',
-  },
-  {
-    title: 'KI als Werkzeug, nicht als Ausrede',
-    text: 'Wir setzen KI gezielt ein, um schneller und gründlicher zu arbeiten. Verantwortung für Qualität und Ergebnis bleibt bei uns.',
-  },
-  {
-    title: 'Klare, ehrliche Kommunikation',
-    text: 'Verständliche Erklärungen statt Fachjargon, realistische Einschätzungen statt leerer Versprechen.',
-  },
-];
----
-
-<Layout
-  title="Über uns"
-  description="Larpaso ist eine Agentur für individuelle Websites mit Fokus auf KI-gestützte Entwicklung. Erfahren Sie mehr über unsere Arbeitsweise."
->
-  <section class="section-tight">
-    <div class="container intro">
-      <p class="eyebrow">Über uns</p>
-      <h1>Wir sind Larpaso.</h1>
-      <p class="text-lead">
-        Larpaso entwickelt individuelle Websites für Kunden, die sich von der Stange nicht
-        zufriedengeben wollen. Unser Schwerpunkt liegt auf KI-gestützter Entwicklung: Wir nutzen
-        moderne KI-Werkzeuge, um Projekte effizienter, gründlicher und zu planbaren Kosten
-        umzusetzen – ohne dabei an handwerklicher Sorgfalt zu sparen.
-      </p>
-      <p>
-        Entstanden ist Larpaso aus der Überzeugung, dass gute Websites weder Massenware noch
-        Luxusgut sein müssen. Mit dem richtigen Werkzeugkasten lässt sich beides verbinden:
-        individuelle, durchdachte Lösungen in überschaubarer Zeit.
-      </p>
-    </div>
-  </section>
-
-  <section class="section-tight">
-    <div class="container">
-      <h2>Wofür wir stehen</h2>
-      <div class="grid grid-3">
-        {values.map((value) => (
-          <div class="card">
-            <h3>{value.title}</h3>
-            <p>{value.text}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  </section>
-
-  <section class="section-tight cta">
-    <div class="container cta-inner">
-      <h2>Lernen Sie uns kennen</h2>
-      <p class="text-lead">Erzählen Sie uns von Ihrem Projekt – wir freuen uns auf den Austausch.</p>
-      <a class="btn btn-primary" href="/kontakt">Kontakt aufnehmen</a>
-    </div>
-  </section>
-</Layout>
-
-<style>
-  .intro {
-    max-width: 46rem;
-  }
-
-  .cta {
-    background: var(--color-surface);
-    border-top: 1px solid var(--color-border);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .cta-inner {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-2);
-  }
-
-  .cta-inner .text-lead {
-    margin-bottom: var(--space-4);
-  }
-</style>

src/styles/global.css

@@ -5,23 +5,28 @@
    ========================================================================== */
 :root {
   /* Farben */
-  --color-bg: #fafafa;
+  --color-bg: #17130f;
-  --color-surface: #ffffff;
+  --color-bg-alt: #1c1712;
-  --color-text: #1f2430;
+  --color-surface: #211b15;
-  --color-text-muted: #5b6472;
+  --color-text: #f2ead9;
-  --color-border: #e4e7ec;
+  --color-text-muted: #a89a85;
+  --color-border: rgba(201, 168, 118, 0.2);
 
-  --color-primary: #4f46e5;
+  --color-primary: #c9a876;
-  --color-primary-dark: #3730a3;
+  --color-primary-dark: #b08f5c;
-  --color-primary-contrast: #ffffff;
+  --color-primary-contrast: #1a1511;
 
-  --color-accent: #14b8a6;
+  --color-accent: #c9a876;
-  --color-accent-dark: #0f766e;
+  --color-accent-dark: #b08f5c;
 
-  --color-success: #16a34a;
+  --color-success: #7a9a6b;
-  --color-danger: #dc2626;
+  --color-danger: #c97b64;
+
+  --color-flag: #c97b64;
+  --color-flag-bg: rgba(201, 123, 100, 0.1);
 
   /* Typografie */
+  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
   --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 
   --font-size-sm: 0.875rem;
@@ -102,6 +107,7 @@ h1, h2, h3, h4 {
   line-height: var(--line-height-tight);
   font-weight: var(--font-weight-bold);
   letter-spacing: -0.01em;
+  font-family: var(--font-serif);
 }
 
 h1 { font-size: var(--font-size-3xl); }
@@ -235,3 +241,10 @@ textarea {
   color: var(--color-primary);
   text-decoration: none;
 }
+
+/* Platzhalter fuer noch fehlende, reale Angaben (Telefonnummer, Preise, Bios etc.) */
+.placeholder {
+  color: var(--color-flag);
+  border-bottom: 1px dashed var(--color-flag);
+  font-style: normal;
+}