<main class="page-shell imprint-page">
  <section class="hero-section panel legal-hero">
    <div class="hero-copy">
      <div class="hero-copy-main">
        <p class="eyebrow">{{ content().imprint.legalEyebrow }}</p>
        <h1>{{ content().imprint.title }}</h1>
        <p class="hero-intro legal-intro">{{ bind(content().imprint.intro) }}</p>
      </div>
      <div class="hero-actions">
        <a class="back-link" routerLink=""
          ><app-icon [icon]="arrowLeftIcon"></app-icon><span>{{ content().imprint.backToPortfolio }}</span></a
        >
      </div>
    </div>

    <div class="hero-visual">
      <div class="portrait-highlight legal-contact-box">
        <p class="hero-contact-title">{{ content().imprint.provider }}</p>
        <p class="legal-provider-name">{{ global.firstname }} {{ global.lastname }}</p>
        <p>- Lechner Systems -</p>
        <p>{{ global.address.street }} {{ global.address.houseNumber }}</p>
        <p>{{ global.address.zip }} {{ global.address.city }}</p>
        <p>{{ global.address.state }}</p>
        <p>{{ global.address.country }}</p>
        <hr />
        <p class="hero-contact-title">{{ content().imprint.directContact }}</p>
        <p>
          {{ content().imprint.phone }}: <a class="inline-link" href="tel:{{ global.hrefContactPhone }}">{{ global.contactPhone }}</a>
        </p>
        <p>
          {{ content().imprint.contact }}: <a class="inline-link" [href]="contactMailHref">{{ global.contactMail }}</a>
        </p>
        <p>
          {{ content().imprint.abuse }}: <a class="inline-link" [href]="abuseMailHref">{{ global.abuseMail }}</a>
        </p>
      </div>
    </div>
  </section>

  <section class="story-section panel legal-section">
    <div class="section-heading">
      <p class="eyebrow">{{ content().imprint.scopeEyebrow }}</p>
      <h2>{{ content().imprint.scopeTitle }}</h2>
    </div>
    <div class="story-grid">
      <div class="story-copy">
        <p>{{ content().imprint.scopeLeft }}</p>
      </div>
      <div class="story-detail">
        <p>{{ content().imprint.scopeRight }}</p>
      </div>
    </div>
  </section>
  <section class="story-section panel legal-section">
    <div class="section-heading compact">
      <p class="eyebrow">{{ content().imprint.privacyEyebrow }}</p>
      <h2>{{ content().imprint.privacyTitle }}</h2>
    </div>
    <div class="story-grid">
      <div class="story-copy">
        <p>{{ bind(content().imprint.privacyLeftParagraphs[0]) }}</p>
        <p>{{ content().imprint.privacyLeftParagraphs[1] }}</p>
        <p>{{ content().imprint.privacyLeftParagraphs[2] }}</p>
      </div>
      <div class="story-detail">
        <p>{{ content().imprint.privacyRightParagraphs[0] }}</p>
        <p>{{ content().imprint.privacyRightParagraphs[1] }}</p>
        <p>{{ content().imprint.privacyRightParagraphs[2] }}</p>
      </div>
    </div>
  </section>
  <section class="story-section panel legal-section">
    <div class="section-heading compact">
      <p class="eyebrow">{{ content().imprint.rightsEyebrow }}</p>
      <h2>{{ content().imprint.rightsTitle }}</h2>
    </div>
    <div class="story-grid">
      <div class="story-copy">
        <p>{{ content().imprint.rightsLeft }}</p>
      </div>
      <div class="story-detail">
        <p>{{ content().imprint.rightsRight }}</p>
      </div>
    </div>
  </section>
  <section class="story-section panel legal-section">
    <div class="section-heading compact">
      <p class="eyebrow">{{ content().imprint.copyrightEyebrow }}</p>
      <h2>{{ content().imprint.copyrightTitle }}</h2>
    </div>
    <div class="story-grid">
      <div class="story-copy">
        <p>{{ content().imprint.copyrightLeftParagraphs[0] }}</p>
        <p>{{ content().imprint.copyrightLeftParagraphs[1] }}</p>
      </div>
      <div class="story-detail">
        <p>{{ content().imprint.copyrightRightParagraphs[0] }}</p>
        <p>{{ content().imprint.copyrightRightParagraphs[1] }}</p>
      </div>
    </div>
  </section>
</main>

<app-footer ngSkipHydration></app-footer>
