larpaso-website/src/pages/index.astro

---
import Layout from '../layouts/Layout.astro';

const highlights = [
  {
    num: 'I',
    title: 'Individuell entwickelt',
    text: 'Keine Templates von der Stange — jede Website wird passend zu Zielen, Marke und Zielgruppe konzipiert und umgesetzt.',
  },
  {
    num: 'II',
    title: 'KI-gestützte Entwicklung',
    text: 'Wir setzen moderne KI-Werkzeuge im Entwicklungsprozess ein, um schneller, gründlicher und zu planbaren Kosten zu liefern.',
  },
  {
    num: 'III',
    title: 'Technisch solide',
    text: 'Saubere, wartbare Umsetzung mit Blick auf Performance, Zugänglichkeit und langfristige Pflegbarkeit.',
  },
];

const leistungen = [
  {
    num: '01',
    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.',
  },
  {
    num: '02',
    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.',
  },
  {
    num: '03',
    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.',
  },
  {
    num: '04',
    title: 'Redesign & Weiterentwicklung',
    text: 'Bestehende Websites überarbeiten, modernisieren oder um neue Funktionen erweitern — technisch fundiert und mit klarem Fokus auf Nutzbarkeit.',
  },
  {
    num: '05',
    title: 'Wartung & Support',
    text: 'Nach dem Launch lassen wir Sie nicht allein: Updates, kleinere Anpassungen und technischer Support nach Bedarf.',
  },
  {
    num: '06',
    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.',
  },
];

const nichtMachen = [
  'Keine Onlineshops. Dafür gibt es Leute, die nichts anderes tun.',
  'Keine Fotos, die es nicht gibt: weder gekaufte Modelle in fremden Räumen noch am Rechner erfundene. Ihre Kunden sollen wiedererkennen, wo sie hinkommen.',
  'Keine Versprechen über Google-Plätze. Wer die gibt, weiß es entweder nicht besser oder hofft, dass Sie nicht nachrechnen.',
  'Keine zehn Seiten, wenn eine reicht. Die meisten Betriebe brauchen weniger, als ihnen verkauft wird.',
];

const mappe = [
  {
    kategorie: 'Konzeptarbeit · Tanzstudio',
    titel: 'Maison Verte',
    text: 'Sand und Salbei. Der Stundenplan steht als Tabelle auf der Seite, nicht als Download, und die Preise auch. Für ein Studio, das ruhig wirken soll, ohne dabei alt auszusehen.',
    nameHidden: false,
  },
  {
    kategorie: 'Konzeptarbeit · Tanzschule',
    titel: 'Tanzhaus Kranich',
    text: 'Dieselbe Seite zweimal, einmal kühl und einmal warm. Wir wollten wissen, was Farbe wirklich anrichtet. Der Unterschied war größer, als wir dachten. Seitdem schlagen wir Ihnen am Ende eine Fassung vor und nicht drei.',
    nameHidden: false,
  },
  {
    kategorie: 'Konzeptarbeit · Kosmetikstudio',
    titel: '',
    text: 'Weich, warm, und trotzdem kein Pastellrosa. Jede Behandlung mit Dauer und Preis, Termin direkt aus der Liste heraus. Damit niemand erst anrufen muss, um zu erfahren, was etwas kostet.',
    nameHidden: true,
  },
];

const ablaufSteps = [
  { num: '01', title: 'Kennenlernen', text: 'Wir klären Ziele, Zielgruppe und Anforderungen in einem unverbindlichen Erstgespräch.', dauer: '' },
  { num: '02', title: 'Konzept & Design', text: 'Struktur, Inhalte und visuelle Richtung werden gemeinsam abgestimmt.', dauer: '' },
  { num: '03', title: 'Entwicklung', text: 'Umsetzung mit modernen Werkzeugen — inklusive KI-gestützter Entwicklung für mehr Tempo.', dauer: '2–3 Tage' },
  { num: '04', title: 'Launch & Betreuung', text: 'Übergabe, Feinschliff und bei Bedarf laufende Weiterentwicklung.', dauer: '' },
];

const faq = [
  'Kann ich die Seite danach selbst ändern?',
  'Was, wenn mir das Ergebnis nicht gefällt?',
  'Ich habe keine guten Fotos. Ist das ein Problem?',
  'Müssen wir uns dafür treffen?',
  'Wie lange dauert es insgesamt?',
  'Was kostet es danach im Jahr?',
  'Ich habe schon eine Website. Lohnt sich das trotzdem?',
];
---

<Layout title="Startseite">
  <!-- Hero -->
  <section class="section hero">
    <div class="container hero-grid">
      <div class="hero-copy">
        <p class="eyebrow">Digitalagentur für individuelle Websites</p>
        <h1>Websites, die zu Ihrem <em>Unternehmen</em> passen.</h1>
        <p class="text-lead">
          <strong>Gebaut mit KI-gestützter Entwicklung.</strong> larpaso entwickelt individuelle
          Websites für Kunden aus unterschiedlichen Branchen. Durch den gezielten Einsatz von KI
          in der Entwicklung liefern wir hochwertige Ergebnisse in kürzerer Zeit,
          <em>ohne Kompromisse bei Qualität und Individualität.</em>
        </p>
        <div class="hero-actions">
          <a class="btn btn-primary" href="#kontakt">Projekt anfragen</a>
        </div>
      </div>

      <div class="hero-visual" aria-hidden="true">
        <p class="hero-visual-label">Beispiel: Ihr Betrieb bei Google</p>
        <div class="search-card">
          <span class="search-tag">Heute</span>
          <p class="search-url">ihr-betrieb.de › home</p>
          <p class="search-title">Ihr Betrieb – Startseite</p>
          <p class="search-desc">Herzlich willkommen auf unserer Homepage. Wir freuen uns über Ihren Besuch …</p>
        </div>
        <p class="hero-visual-divider">Dieselbe Firma, andere Zeile</p>
        <div class="search-card search-card-accent">
          <span class="search-tag search-tag-accent">Möglich</span>
          <p class="search-url">ihr-betrieb.de</p>
          <p class="search-title">Ihr Betrieb in [Ort] – Termine, Preise, Anfahrt</p>
          <p class="search-desc">
            Geöffnet Mo–Fr 9–18 Uhr. <strong>Termin in zwei Klicks</strong>, Preise stehen auf der
            Seite, Anfahrt und Parkplätze erklärt.
          </p>
          <p class="search-meta">★★★★★ <span class="placeholder">[Zahl]</span> Bewertungen · Jetzt geöffnet</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Preis / Startangebot -->
  <section id="preis" class="section-tight">
    <div class="container price-grid">
      <div class="price-main">
        <p class="eyebrow">01 · Drei Plätze, dann ist Schluss</p>
        <h2>Wir brauchen drei Seiten, die wir herzeigen können.</h2>
        <p class="price-tag"><span class="price-amount">500&nbsp;€</span> komplett, einmalig</p>
        <p class="text-lead">
          Eine fertige Website statt eines Angebots über „Konzeptphasen“. Wir schreiben die
          Texte, bauen die Seite und stellen sie online. Sie sagen uns, was Sie machen und für wen.
        </p>
        <div class="price-progress" aria-hidden="true">
          <span></span><span></span><span></span>
        </div>
        <p class="price-note">
          Noch <span class="placeholder">[3]</span> von 3 Plätzen frei — Stand
          <span class="placeholder">[Datum]</span>.
        </p>

        <ul class="price-list">
          <li>Eine Seite mit allem, was Kunden suchen: Angebot, Preise, Zeiten, Anfahrt, Kontakt</li>
          <li>Auf dem Handy zuerst gebaut, nicht nachträglich zusammengeschoben</li>
          <li>Impressum und Datenschutzerklärung eingebaut, Schriften auf Ihrem Server</li>
          <li>Alle Texte von uns geschrieben, nach einem Gespräch mit Ihnen</li>
          <li>Google-Grundlagen: Titel mit Ort, Beschreibung, Firmendaten für die Kartenanzeige</li>
          <li>Einweisung, wie Sie Zeiten und Preise selbst ändern</li>
          <li class="price-list-excluded">Nicht enthalten: Fotoshooting, Logo-Neuentwurf, Onlineshop</li>
          <li class="price-list-excluded">
            Nicht enthalten: Domain und Hosting. Das läuft auf Ihren Namen und kostet
            <span class="placeholder">[ca. Betrag]</span> € im Jahr
          </li>
        </ul>
      </div>

      <aside class="price-aside card">
        <h3>Warum so günstig?</h3>
        <p>
          Weil wir am Anfang stehen und Arbeiten zeigen müssen, die echten Betrieben gehören.
          Dafür bitten wir um zwei Dinge: Wir dürfen die fertige Seite in unserer Mappe zeigen,
          und wenn Sie zufrieden sind, schreiben Sie uns drei Sätze, die wir zitieren dürfen.
        </p>
        <p>
          Kein Abo und keine Vertragslaufzeit. Sie zahlen die Hälfte zum Start, die Hälfte, wenn
          die Seite online ist.
        </p>
        <a class="btn btn-primary" href="#kontakt">Projekt anfragen</a>
      </aside>
    </div>
  </section>

  <!-- Warum uns unterscheidet -->
  <section id="warum" class="section">
    <div class="container">
      <p class="eyebrow">02 · Was uns unterscheidet</p>
      <h2>Individuell, KI-gestützt, technisch solide.</h2>
      <p class="text-lead">
        larpaso entwickelt individuelle Websites für Kunden, die sich von der Stange nicht
        zufriedengeben wollen.
      </p>

      <div class="grid grid-3 differentiators">
        {highlights.map((item) => (
          <div class="differentiator">
            <span class="roman">{item.num}</span>
            <h3>{item.title}</h3>
            <p>{item.text}</p>
          </div>
        ))}
      </div>

      <div class="readability">
        <h3>Lesbar schlägt vollständig.</h3>
        <p class="text-lead">
          Dieselben Angaben, zweimal. Einmal als Datei, die man erst herunterladen muss. Einmal
          als Tabelle, die schon da ist. Angerufen wird nach dem zweiten Weg.
        </p>

        <div class="readability-grid">
          <div>
            <p class="readability-label">So sieht es heute oft aus</p>
            <div class="pdf-card">
              <span class="pdf-icon">PDF</span>
              <div>
                <p class="pdf-name">Oeffnungszeiten_2026_final_v3.pdf</p>
                <p class="pdf-meta">2,4 MB · zum Herunterladen</p>
              </div>
            </div>
          </div>
          <div>
            <p class="readability-label">So sieht es nachher aus</p>
            <div class="hours-card">
              <h4>Öffnungszeiten</h4>
              <div class="hours-row hours-head">
                <span>Tag</span><span></span>
              </div>
              <div class="hours-row">
                <span>Montag – Donnerstag</span><span>9:00–18:00</span>
              </div>
              <div class="hours-row">
                <span>Freitag</span><span>9:00–14:00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Leistungen -->
  <section id="leistungen" class="section">
    <div class="container">
      <p class="eyebrow">03 · Was Sie bekommen</p>
      <h2>Was wir für Sie tun können</h2>
      <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>

      <ul class="leistungen-list">
        {leistungen.map((item) => (
          <li>
            <span class="leistungen-num">{item.num}</span>
            <div>
              <h3>{item.title}</h3>
              <p>{item.text}</p>
            </div>
          </li>
        ))}
      </ul>

      <div class="nicht-machen">
        <h3>Was wir nicht machen</h3>
        <div class="grid grid-2">
          {nichtMachen.map((text) => (
            <p class="nicht-machen-item">— {text}</p>
          ))}
        </div>
      </div>
    </div>
  </section>

  <!-- Mappe / Arbeiten -->
  <section id="arbeiten" class="section">
    <div class="container">
      <p class="eyebrow">04 · Mappe</p>
      <h2>Drei Entwürfe, an denen Sie unsere Handschrift sehen.</h2>

      <div class="mappe-grid">
        {mappe.map((item) => (
          <article class="mappe-item">
            <div class="mappe-shot">
              <span>Bildschirmfoto <span class="placeholder">einsetzen</span></span>
            </div>
            <p class="mappe-kategorie">{item.kategorie}</p>
            <h3>{item.nameHidden ? <span class="placeholder">[Studio — erst nach Freigabe zeigen]</span> : item.titel}</h3>
            <p>{item.text}</p>
          </article>
        ))}
      </div>
    </div>
  </section>

  <!-- Ablauf -->
  <section id="ablauf" class="section">
    <div class="container">
      <p class="eyebrow">05 · So arbeiten wir</p>
      <h2>Vom ersten Gespräch bis zum Launch</h2>

      <div class="ablauf-list">
        {ablaufSteps.map((step) => (
          <div class="ablauf-step">
            <span class="ablauf-num">{step.num}</span>
            <div class="ablauf-body">
              <h3>{step.title}</h3>
              <p>{step.text}</p>
            </div>
            <span class="ablauf-dauer">
              {step.dauer || <span class="placeholder">[Dauer?]</span>}
            </span>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Über uns -->
  <section class="section about">
    <div class="container about-grid">
      <div class="about-photo">
        <span>
          Foto von Lara und Pascal <span class="placeholder">einsetzen</span><br />
          <small>zusammen, hochkant, echtes Licht</small>
        </span>
      </div>

      <div class="about-copy">
        <p class="eyebrow">06 · Über uns</p>
        <h2>Wir sind larpaso.</h2>
        <p class="about-quote">KI als Werkzeug, nicht als Ausrede.</p>

        <p>
          Technik ändert sich schnell. Und mit ihr, was Kundinnen und Kunden von einem Betrieb
          erwarten: eine Seite, die auf dem Handy funktioniert, klar sagt, worum es geht, und
          nicht nach gestern aussieht. Was heute auffällt, ist in zwei Jahren Standard. Wir bauen
          Websites für Menschen, die da mithalten wollen, ohne sich selbst in Technik einarbeiten
          zu müssen.
        </p>
        <p>
          Dabei helfen uns KI-Werkzeuge. Sie nehmen uns Routine ab, damit wir Zeit haben für das,
          worauf es ankommt: zuhören, mitdenken, sorgfältig arbeiten. So bleiben individuelle
          Lösungen in überschaubarer Zeit und zu planbaren Kosten möglich, weder Massenware noch
          Luxusgut.
        </p>
        <p>
          Der Name ist aus uns gebaut: <strong>Lara</strong> und <strong>Pas</strong>cal. Und die
          zweite Hälfte ist ein Wort: <em>paso</em>, spanisch für Schritt. Für uns steht es für
          Fortschritt. Wir lernen weiter, entwickeln unsere Arbeit weiter und Ihre Seite gleich
          mit, Schritt für Schritt.
        </p>

        <div class="about-bios">
          <p class="placeholder">
            [Lara — drei bis vier Sätze in eigenen Worten: Was hat sie vorher gemacht, wie ist sie
            dazu gekommen, was macht sie bei larpaso? Noch zu ergänzen.]
          </p>
          <p class="placeholder">
            [Pascal — drei bis vier Sätze in eigenen Worten: Was hat er vorher gemacht, wie ist er
            dazu gekommen, was macht er bei larpaso? Noch zu ergänzen.]
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="section faq">
    <div class="container">
      <p class="eyebrow">07 · Bevor Sie fragen</p>
      <h2>Die Punkte, an denen die meisten zögern.</h2>

      <div class="faq-list">
        {faq.map((question, i) => (
          <details class="faq-item" name="faq">
            <summary>
              {question}
              <span class="faq-icon" aria-hidden="true">+</span>
            </summary>
            <p class="placeholder">[Antwort noch zu ergänzen]</p>
          </details>
        ))}
      </div>
    </div>
  </section>

  <!-- Kontakt -->
  <section id="kontakt" class="section-tight contact">
    <div class="container contact-grid">
      <div class="contact-intro">
        <p class="eyebrow">08 · Kontakt</p>
        <h2>Lassen Sie uns sprechen.</h2>
        <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">
          <p class="contact-label">Lieber anrufen</p>
          <p class="placeholder contact-phone">[Telefonnummer eintragen]</p>
          <p class="placeholder contact-hours">[Erreichbarkeit eintragen, z. B. Mo–Fr 9–18 Uhr]</p>
        </div>

        <div class="contact-detail">
          <p class="contact-label">Oder direkt schreiben</p>
          <p class="contact-email"><a href="mailto:kontakt@larpaso.de">kontakt@larpaso.de</a></p>
          <p class="contact-hint">Antwort in der Regel am selben Tag.</p>
        </div>

        <div class="contact-detail">
          <p class="contact-label">Wie wir arbeiten</p>
          <p class="placeholder">[Wie wir arbeiten — noch zu ergänzen]</p>
        </div>
      </div>

      <form class="contact-form card" aria-label="Kontaktformular" id="contact-form">
        <div class="form-field">
          <label for="name">Ihr Name</label>
          <input type="text" id="name" name="name" placeholder="Vor- und Nachname" required />
        </div>

        <div class="form-field">
          <label for="betrieb">Betrieb</label>
          <input type="text" id="betrieb" name="betrieb" placeholder="Wie heißt Ihr Laden?" />
        </div>

        <div class="form-field">
          <label for="telefon">Telefon</label>
          <input type="tel" id="telefon" name="telefon" placeholder="Für den Rückruf" />
        </div>

        <div class="form-field">
          <label for="email">E-Mail</label>
          <input type="email" id="email" name="email" placeholder="name@betrieb.de" required />
        </div>

        <div class="form-field">
          <label for="message">Worum geht es?</label>
          <textarea
            id="message"
            name="message"
            rows="5"
            placeholder="Zwei, drei Sätze reichen: Was machen Sie, und was stört Sie an Ihrer jetzigen Seite? Wenn Sie schon eine haben, gern die Adresse dazu."
          ></textarea>
        </div>

        <button type="submit" class="btn btn-primary form-submit">Anfrage abschicken</button>
        <p class="form-note">
          Das Formular öffnet Ihr E-Mail-Programm mit fertig ausgefülltem Text. Es geht nichts an
          Dritte. Wie wir mit Ihren Angaben umgehen, steht in der
          <a href="/datenschutz">Datenschutzerklärung</a>.
        </p>
      </form>
    </div>
  </section>

  <script>
    const form = document.getElementById('contact-form') as HTMLFormElement | null;
    form?.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = new FormData(form);
      const name = String(data.get('name') || '');
      const betrieb = String(data.get('betrieb') || '');
      const telefon = String(data.get('telefon') || '');
      const email = String(data.get('email') || '');
      const message = String(data.get('message') || '');

      const bodyLines = [
        `Name: ${name}`,
        betrieb && `Betrieb: ${betrieb}`,
        telefon && `Telefon: ${telefon}`,
        email && `E-Mail: ${email}`,
        '',
        message,
      ].filter(Boolean);

      const subject = encodeURIComponent(`Projektanfrage${betrieb ? ` – ${betrieb}` : ''}`);
      const body = encodeURIComponent(bodyLines.join('\n'));
      window.location.href = `mailto:kontakt@larpaso.de?subject=${subject}&body=${body}`;
    });
  </script>
</Layout>

<style>
  /* Hero */
  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
    align-items: center;
  }

  .hero-copy {
    max-width: 34rem;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
  }

  .hero h1 em {
    color: var(--color-accent);
    font-style: italic;
  }

  .hero-actions {
    margin-top: var(--space-6);
  }

  .hero-visual-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
  }

  .search-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    position: relative;
  }

  .search-card-accent {
    border-color: rgba(201, 168, 118, 0.4);
  }

  .search-tag {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .search-tag-accent {
    background: var(--color-accent);
    color: var(--color-primary-contrast);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
  }

  .search-url {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-1) 0;
  }

  .search-title {
    color: #8fb2e8;
    font-size: var(--font-size-md);
    margin: 0 0 var(--space-2) 0;
  }

  .search-desc,
  .search-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
  }

  .hero-visual-divider {
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: var(--space-4) 0;
  }

  /* Preis */
  .price-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  .price-tag {
    margin: var(--space-4) 0;
  }

  .price-amount {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--color-accent);
    font-weight: 600;
  }

  .price-progress {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-3);
  }

  .price-progress span {
    height: 4px;
    width: 3rem;
    background: var(--color-accent);
    border-radius: 2px;
  }

  .price-note {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .price-list {
    list-style: none;
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .price-list li {
    padding-left: var(--space-5);
    position: relative;
    font-size: var(--font-size-sm);
    color: var(--color-text);
  }

  .price-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
  }

  .price-list-excluded {
    color: var(--color-text-muted);
  }

  .price-list-excluded::before {
    background: transparent;
    border: 1px solid var(--color-text-muted);
  }

  .price-aside {
    position: sticky;
    top: 6rem;
  }

  .price-aside p {
    font-size: var(--font-size-sm);
  }

  /* Warum / Differentiators */
  .differentiators {
    margin-top: var(--space-7);
  }

  .differentiator {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
  }

  .roman {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--font-size-2xl);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
  }

  .readability {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
  }

  .readability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-6);
  }

  .readability-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
  }

  .pdf-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
  }

  .pdf-icon {
    background: var(--color-danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
  }

  .pdf-name {
    margin: 0;
    font-weight: var(--font-weight-medium);
  }

  .pdf-meta {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .hours-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
  }

  .hours-card h4 {
    margin-bottom: var(--space-3);
  }

  .hours-row {
    display: flex;
    justify-content: space-between;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
  }

  .hours-row:last-child {
    border-bottom: none;
  }

  .hours-head {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
  }

  /* Leistungen */
  .leistungen-list {
    list-style: none;
    margin-top: var(--space-7);
  }

  .leistungen-list li {
    display: flex;
    gap: var(--space-6);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

  .leistungen-num {
    font-family: var(--font-serif);
    color: var(--color-accent);
    flex-shrink: 0;
    width: 2.5rem;
  }

  .leistungen-list h3 {
    margin-bottom: var(--space-2);
  }

  .leistungen-list p {
    margin: 0;
  }

  .nicht-machen {
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-border);
  }

  .nicht-machen-item {
    color: var(--color-text);
  }

  /* Mappe */
  .mappe-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
    margin-top: var(--space-7);
  }

  .mappe-item:first-child {
    grid-column: 1 / -1;
  }

  .mappe-shot {
    aspect-ratio: 16 / 9;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
  }

  .mappe-kategorie {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
  }

  /* Ablauf */
  .ablauf-list {
    margin-top: var(--space-7);
  }

  .ablauf-step {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    gap: var(--space-5);
    align-items: baseline;
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--color-border);
  }

  .ablauf-num {
    font-family: var(--font-serif);
    font-size: var(--font-size-2xl);
    color: var(--color-accent);
  }

  .ablauf-body h3 {
    margin-bottom: var(--space-2);
  }

  .ablauf-body p {
    margin: 0;
  }

  .ablauf-dauer {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  /* About */
  .about-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-8);
    align-items: start;
  }

  .about-photo {
    aspect-ratio: 3 / 4;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .about-quote {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-accent);
    font-size: var(--font-size-lg);
    border-left: 2px solid var(--color-accent);
    padding-left: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .about-bios {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* FAQ */
  .faq-list {
    margin-top: var(--space-7);
    border-top: 1px solid var(--color-border);
  }

  .faq-item {
    border-bottom: 1px solid var(--color-border);
    padding-block: var(--space-5);
  }

  .faq-item summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-icon {
    color: var(--color-accent);
    font-size: var(--font-size-lg);
  }

  .faq-item[open] .faq-icon {
    transform: rotate(45deg);
  }

  .faq-item p {
    margin-top: var(--space-4);
  }

  /* Kontakt */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-8);
    align-items: start;
  }

  .contact-detail {
    margin-top: var(--space-6);
  }

  .contact-label {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
  }

  .contact-phone {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
  }

  .contact-email {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-1);
  }

  .contact-hint {
    font-size: var(--font-size-sm);
    margin: 0;
  }

  .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: 900px) {
    .hero-grid,
    .price-grid,
    .about-grid,
    .contact-grid {
      grid-template-columns: 1fr;
    }

    .price-aside {
      position: static;
    }

    .readability-grid,
    .mappe-grid {
      grid-template-columns: 1fr;
    }

    .mappe-item:first-child {
      grid-column: auto;
    }

    .ablauf-step {
      grid-template-columns: 2.5rem 1fr;
    }

    .ablauf-dauer {
      grid-column: 2;
    }
  }
</style>