Atomic Design in der Praxis: Ein Portfolio mit 45+ Astro-Komponenten

src/components/molecules/
├── Breadcrumbs.astro        # Pfadnavigation + Schema.org
├── Card.astro               # Universelle Karte: Heading + Text + Button
├── ContactInfo.astro        # Adresse/Telefon/E-Mail-Block
├── FormField.astro          # Label + Input + Fehlermeldung
├── LanguageSwitcher.astro   # DE/EN/ES-Sprachumschalter
├── NavLink.astro            # Navigation-Link mit Active-State
├── Pagination.astro         # Seitennavigation mit Prev/Next
├── ProjectCard.astro        # Portfolio-Karte mit Tags
├── SearchBar.astro          # Input + Button + Suchlogik
├── SocialLinks.astro        # Icon-Links zu Social Media
├── TestimonialCard.astro    # Kundenmeinung mit Avatar
├── TimelineItem.astro       # Einzelner Zeitstrahl-Eintrag
├── TrustBadge.astro         # Vertrauens-Indikatoren
└── blog/
    ├── CalloutBox.astro     # CTA-Box im Artikel
    ├── InfoBox.astro        # Hinweis/Warnung/Tipp-Box
    ├── QuoteBlock.astro     # Zitat mit Quellenangabe
    └── StatCard.astro       # Kennzahl mit Label

src/components/organisms/
├── About.astro              # Über-mich-Sektion
├── Contact.astro            # Kontaktformular komplett
├── FaqSection.astro         # FAQ mit Akkordeon
├── Footer.astro             # Kompletter Footer
├── Header.astro             # Header mit Navigation
├── Hero.astro               # Hero-Sektion mit Varianten
├── Navigation.astro         # Hauptnavigation (Desktop/Mobile)
├── Portfolio.astro          # Projektgalerie
├── Pricing.astro            # Preisübersicht
├── Services.astro           # Leistungsübersicht
├── Testimonials.astro       # Kundenstimmen-Karussell
├── TimelineSection.astro    # Berufserfahrung-Zeitstrahl
└── blog/
    ├── CodeTabs.astro       # Code-Tabs für MDX
    ├── ComparisonTable.astro # Vergleichstabelle
    ├── FaqAccordion.astro   # FAQ im Blog-Artikel
    └── ...                  # Weitere Blog-Organismen

src/layouts/
├── BaseLayout.astro         # Grundgerüst: Head + Header + Main + Footer
├── BlogLayout.astro         # Blog-spezifisch: TOC + Author + Related
└── PortfolioLayout.astro    # Portfolio-Detail: Galerie + Technik

src/pages/
├── index.astro              # Startseite (Hero + Services + Portfolio + ...)
├── about.astro              # Über mich
├── contact.astro            # Kontakt
├── pricing.astro            # Preise
├── blog/
│   ├── index.astro          # Blog-Übersicht
│   ├── [slug].astro         # Einzelner Blog-Post
│   ├── page/[page].astro    # Paginierung
│   ├── tags.astro           # Tag-Übersicht
│   ├── tag/[tag].astro      # Posts pro Tag
│   ├── categories.astro     # Kategorie-Übersicht
│   ├── kategorie/[cat].astro # Posts pro Kategorie
│   └── search.astro         # Blog-Suche
└── portfolio/
    ├── index.astro          # Portfolio-Übersicht
    └── [slug].astro         # Portfolio-Detail

---
/* NavLink-Molekül: Nutzt Icon-Atom für optionales Leading-Icon */
import Icon from '../atoms/Icon.astro';
import Link from '../atoms/Link.astro';

interface Props {
  href: string;
  icon?: IconName;
  isActive?: boolean;
  locale?: 'de' | 'en' | 'es';
}
---

<Link
  href={href}
  class:list={['nav-link', { 'nav-link--active': isActive }]}
>
  {icon && <Icon name={icon} size={18} />}
  <slot />
</Link>

---
/* Breadcrumbs-Molekül: Links mit Schema.org-Markup */
import Link from '../atoms/Link.astro';
import Icon from '../atoms/Icon.astro';

interface Props {
  items: BreadcrumbItem[];
}

const { items } = Astro.props;
---

<nav aria-label="Breadcrumb" class="breadcrumbs">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    {items.map((item, index) => (
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        {item.href ? (
          <Link href={item.href} itemprop="item">
            <span itemprop="name">{item.label}</span>
          </Link>
        ) : (
          <span itemprop="name" aria-current="page">
            {item.label}
          </span>
        )}
        <meta itemprop="position" content={String(index + 1)} />
        {index < items.length - 1 && (
          <Icon name="chevron-right" size={14} />
        )}
      </li>
    ))}
  </ol>
</nav>

<!-- Schema.org BreadcrumbList JSON-LD wird automatisch generiert -->

---
/* FormField-Molekül: Label + Input + Fehlermeldung als Einheit */
import Input from '../atoms/Input.astro';
import Text from '../atoms/Text.astro';

interface Props {
  label: string;
  name: string;
  type?: 'text' | 'email' | 'tel';
  required?: boolean;
  error?: string;
  helpText?: string;
}

const { label, name, type = 'text', required, error, helpText } = Astro.props;
const inputId = `field-${name}`;
---

<div class:list={['form-field', { 'form-field--error': error }]}>
  <label for={inputId} class="form-field__label">
    {label}
    {required && <span aria-hidden="true">*</span>}
  </label>
  <Input
    type={type}
    name={name}
    id={inputId}
    required={required}
    aria-describedby={error ? `${inputId}-error` : helpText ? `${inputId}-help` : undefined}
    aria-invalid={!!error}
  />
  {error && (
    <Text id={`${inputId}-error`} size="sm" class="form-field__error" role="alert">
      {error}
    </Text>
  )}
  {helpText && !error && (
    <Text id={`${inputId}-help`} size="sm" muted>
      {helpText}
    </Text>
  )}
</div>

---
/* Footer-Organismus: Zusammensetzung aus Heading, Text, SocialLinks */
import Heading from '../atoms/Heading.astro';
import Text from '../atoms/Text.astro';
import Link from '../atoms/Link.astro';
import SocialLinks from '../molecules/SocialLinks.astro';

interface Props {
  locale?: 'de' | 'en' | 'es';
}

const { locale = 'de' } = Astro.props;
const currentYear = new Date().getFullYear();

/* Locale-spezifische Footer-Links */
const footerNav = SITE.footerNavigation[locale];
---

<footer class="footer" id="footer">
  <div class="footer__inner">
    <div class="footer__brand">
      <Heading level={2} size="md">Arnold Wender</Heading>
      <Text muted>Webentwickler & Digitaler Creator</Text>
      <SocialLinks />
    </div>

    <nav class="footer__nav" aria-label="Footer-Navigation">
      {footerNav.columns.map((column) => (
        <div class="footer__column">
          <Heading level={3} size="sm">{column.title}</Heading>
          <ul>
            {column.links.map((link) => (
              <li>
                <Link href={link.href}>{link.label}</Link>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </nav>

    <div class="footer__bottom">
      <Text size="sm" muted>
        &copy; {currentYear} Arnold Wender. Alle Rechte vorbehalten.
      </Text>
    </div>
  </div>
</footer>

---
/* Hero-Organismus: Flexible Hero mit zentrierter/linksbündiger Variante */
import Heading from '../atoms/Heading.astro';
import Text from '../atoms/Text.astro';
import Button from '../atoms/Button.astro';
import Badge from '../atoms/Badge.astro';

interface Props {
  title: string;
  subtitle?: string;
  badge?: string;
  variant?: 'centered' | 'left';
  primaryCta?: { text: string; href: string };
  secondaryCta?: { text: string; href: string };
}

const {
  title,
  subtitle,
  badge,
  variant = 'centered',
  primaryCta,
  secondaryCta,
} = Astro.props;
---

<section class:list={['hero', `hero--${variant}`]} id="hero">
  <div class="hero__content">
    {badge && <Badge variant="accent">{badge}</Badge>}
    <Heading level={1} size="2xl">{title}</Heading>
    {subtitle && <Text size="lg" class="hero__subtitle">{subtitle}</Text>}
    <div class="hero__actions">
      {primaryCta && (
        <Button variant="primary" size="lg" href={primaryCta.href}>
          {primaryCta.text}
        </Button>
      )}
      {secondaryCta && (
        <Button variant="secondary" size="lg" href={secondaryCta.href}>
          {secondaryCta.text}
        </Button>
      )}
    </div>
  </div>
  <slot />  {/* Für optionalen visuellen Inhalt */}
</section>

/* Button.astro <style> — Atom nutzt Token */
.btn--primary {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-text-on-primary);
}

.btn--primary:hover {
  background-color: var(--color-btn-primary-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Card.astro <style> — Molekül nutzt gleiche Token */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.card:hover {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-md);
}

/* Hero.astro <style> — Organismus nutzt gleiche Token */
.hero {
  padding: var(--space-section-lg) var(--space-4);
  background: var(--color-bg);
}

.hero__subtitle {
  color: var(--color-text-secondary);
  max-width: 60ch;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
}