Hoard/GUI/src/routes/Impressum.vue

<script setup lang="ts">
const companyDetails = [
  { label: 'Anbieter', value: 'Hoard Labs GmbH (Testdaten)' },
  { label: 'Vertreten durch', value: 'Max Mustermann, Geschäftsführer' },
  { label: 'Adresse', value: 'Musterstraße 42, 12345 Musterstadt, Deutschland' },
]

const registerDetails = [
  { label: 'Handelsregister', value: 'HRB 123456' },
  { label: 'Registergericht', value: 'Amtsgericht Musterstadt' },
  { label: 'Umsatzsteuer-ID', value: 'DE123456789' },
]

const contactDetails = [
  { label: 'Telefon', value: '+49 30 1234567-0', href: 'tel:+493012345670' },
  { label: 'E-Mail', value: 'kontakt@ui-demo.de', href: 'mailto:kontakt@ui-demo.de' },
  { label: 'Support', value: 'support@ui-demo.de', href: 'mailto:support@ui-demo.de' },
]

const legalNotes = [
  {
    icon: 'mdi-account-voice',
    title: 'Verantwortlich für den Inhalt',
    text: 'Julia Beispiel, Musterstraße 42, 12345 Musterstadt, Deutschland (Testdaten).',
  },
  {
    icon: 'mdi-scale-balance',
    title: 'EU-Streitbeilegung',
    text: 'Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung bereit. Wir sind nicht verpflichtet und nicht bereit, an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.',
  },
  {
    icon: 'mdi-shield-check-outline',
    title: 'Haftung für Inhalte',
    text: 'Als Diensteanbieter sind wir für eigene Inhalte nach den allgemeinen Gesetzen verantwortlich. Für fremde Inhalte, auf die wir verweisen, übernehmen wir keine Gewähr. Dieses Impressum enthält ausschließlich Demo-Angaben.',
  },
  {
    icon: 'mdi-link-variant',
    title: 'Haftung für Links',
    text: 'Unsere Seiten enthalten Links zu externen Webseiten Dritter. Für deren Inhalte ist stets der jeweilige Anbieter verantwortlich. Bei Bekanntwerden von Rechtsverletzungen werden derartige Links umgehend entfernt.',
  },
]
</script>

<template>
  <v-container fluid class="impressum-page ui-page">
    <section class="impressum-hero ui-panel ui-panel-gradient ui-spotlight">
      <div class="impressum-hero__copy">
        <p class="ui-kicker ui-kicker--wide">Rechtliche Angaben</p>
        <h1>Impressum</h1>
        <p class="impressum-hero__lead">
          Diese Seite ist im Hoard-Design aufgebaut und mit Testdaten gefüllt. Vor produktivem
          Einsatz bitte alle Angaben durch echte Unternehmensdaten ersetzen.
        </p>

        <div class="impressum-hero__meta">
          <span class="ui-chip ui-chip--brand">
            <v-icon icon="mdi-information-outline" size="14" /> Testdaten
          </span>
          <span class="ui-chip">
            <v-icon icon="mdi-calendar-month-outline" size="14" /> Stand: 26. April 2026
          </span>
        </div>
      </div>

      <div class="impressum-hero__actions ui-action-row">
        <v-btn variant="elevated" prepend-icon="mdi-home-outline" to="/welcome">
          Zur Startseite
        </v-btn>
        <v-btn variant="outlined" prepend-icon="mdi-login" to="/login">Zum Login</v-btn>
      </div>
    </section>

    <section class="details-grid">
      <article class="detail-card ui-panel">
        <header class="detail-card__head">
          <span class="ui-icon-tile"><v-icon icon="mdi-domain" size="20" /></span>
          <h2>Anbieterangaben</h2>
        </header>
        <dl class="detail-list">
          <div v-for="entry in companyDetails" :key="entry.label" class="detail-item">
            <dt>{{ entry.label }}</dt>
            <dd>{{ entry.value }}</dd>
          </div>
        </dl>
      </article>

      <article class="detail-card ui-panel">
        <header class="detail-card__head">
          <span class="ui-icon-tile"><v-icon icon="mdi-email-outline" size="20" /></span>
          <h2>Kontakt</h2>
        </header>
        <dl class="detail-list">
          <div v-for="entry in contactDetails" :key="entry.label" class="detail-item">
            <dt>{{ entry.label }}</dt>
            <dd>
              <a :href="entry.href">{{ entry.value }}</a>
            </dd>
          </div>
        </dl>
      </article>

      <article class="detail-card ui-panel">
        <header class="detail-card__head">
          <span class="ui-icon-tile"><v-icon icon="mdi-clipboard-text-outline" size="20" /></span>
          <h2>Register &amp; Steuer</h2>
        </header>
        <dl class="detail-list">
          <div v-for="entry in registerDetails" :key="entry.label" class="detail-item">
            <dt>{{ entry.label }}</dt>
            <dd>{{ entry.value }}</dd>
          </div>
        </dl>
      </article>
    </section>

    <section class="notes-section ui-panel">
      <header class="ui-section-head">
        <p class="ui-kicker">Rechtliche Hinweise</p>
        <h2>Wichtige Zusatzinformationen</h2>
        <p>Standardklauseln, die im Produktivbetrieb durch eine juristische Prüfung ersetzt werden sollten.</p>
      </header>

      <div class="notes-grid">
        <article v-for="note in legalNotes" :key="note.title" class="note-card">
          <span class="ui-icon-tile">
            <v-icon :icon="note.icon" size="20" />
          </span>
          <div>
            <h3>{{ note.title }}</h3>
            <p>{{ note.text }}</p>
          </div>
        </article>
      </div>
    </section>
  </v-container>
</template>

<style scoped>
.impressum-page {
  --ui-page-width: 1180px;
}

/* ---------- Hero ---------- */
.impressum-hero {
  --ui-gradient-angle: 130deg;
  --ui-gradient-start: color-mix(in srgb, var(--color-primary-100) 60%, var(--color-surface) 40%);
  --ui-gradient-end: var(--color-surface);
  --ui-gradient-end-stop: 65%;

  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: var(--space-6);
  align-items: end;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-xl);
}

.impressum-hero__copy h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(2rem, 1.4rem + 1.4vw, 2.6rem);
  letter-spacing: -0.02em;
}

.impressum-hero__lead {
  margin: 0;
  max-width: 64ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.6;
}

.impressum-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.impressum-hero__actions {
  justify-content: flex-end;
}

/* ---------- Detail cards ---------- */
.details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.detail-card:hover {
  border-color: color-mix(in srgb, var(--color-primary-300) 50%, var(--color-border) 50%);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.detail-card__head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.detail-card h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  letter-spacing: -0.01em;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.detail-item {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.detail-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

dt {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-md);
}

/* ---------- Notes ---------- */
.notes-section {
  padding: var(--space-7);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.note-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-surface-alt) 60%, var(--color-surface) 40%);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.note-card:hover {
  border-color: color-mix(in srgb, var(--color-primary-300) 40%, var(--color-border) 60%);
  background-color: var(--color-surface);
  transform: translateY(-2px);
}

.note-card h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.note-card p {
  margin: 0;
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: no-preference) {
  .impressum-hero,
  .detail-card,
  .notes-section {
    animation: ui-soft-enter 280ms both;
  }

  .detail-card:nth-child(2) { animation-delay: 80ms; }
  .detail-card:nth-child(3) { animation-delay: 140ms; }
  .notes-section { animation-delay: 200ms; }
}

@media (width <= 1080px) {
  .details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 960px) {
  .impressum-hero {
    grid-template-columns: 1fr;
    align-items: start;
    padding: var(--space-7);
  }

  .impressum-hero__actions {
    justify-content: flex-start;
  }

  .details-grid,
  .notes-grid {
    grid-template-columns: 1fr;
  }

  .notes-section {
    padding: var(--space-6);
  }
}

@media (width <= 600px) {
  .impressum-hero,
  .notes-section,
  .detail-card {
    padding: var(--space-5);
  }

  .impressum-hero__actions {
    width: 100%;
  }

  :deep(.impressum-hero__actions .v-btn) {
    width: 100%;
  }

  .impressum-hero__meta {
    margin-top: var(--space-4);
  }

  .note-card {
    padding: var(--space-4);
  }
}
</style>