---
import Base from '../layouts/Base.astro';
const main = `<!-- Hero -->
  <div class="about-hero">
    <div class="about-hero-inner">
      <p class="about-eyebrow">Die Geschichte</p>
      <h1 class="about-hero-heading">Heizungsbauer<br>aus Leidenschaft.</h1>
      <p class="about-hero-sub">PMPNZNG steht für eine Branche, die ihren Spaß versteht — und nicht erklärt werden muss. Von Handwerkern, für Handwerker. Aus Ahlerstedt.</p>
    </div>
  </div>

  <!-- Content -->
  <div class="about-content">

    <div class="about-section">
      <p class="about-section-label">Warum das alles</p>
      <h2 class="about-h2">Von der Werkzeugkiste zum Kleiderschrank.</h2>
      <p class="about-text">
        TGA Solutions GmbH ist ein Meisterfachbetrieb für Sanitär, Heizung &amp; Klima
        aus Ahlerstedt — gegründet im Februar 2021 von Co-Geschäftsführer Marcel Trautwein
        mit dem Anspruch, Handwerk neu zu denken. Innovation, Respekt, Nachhaltigkeit.
        Und ein Team, das seinen Job nicht nur macht, sondern lebt.
      </p>
      <p class="about-text">
        Was als Fachbetrieb anfing, wurde schnell zur Community — auf der Baustelle,
        in der Werkstatt, auf Instagram. Irgendwann war klar: Die SHK-Welt braucht
        Merch, der genauso ehrlich ist wie die Arbeit dahinter. Kein Werbeartikel,
        kein Promo-Ding. Kleidung für Leute, die wissen, was eine Pumpenzange ist.
      </p>
    </div>

    <div class="about-quote">
      <p class="about-quote-text">„Pumpenzange kennt jeder. Aber wer trägt sie auch auf dem Rücken?"</p>
      <p class="about-quote-author">TGA Solutions GmbH · Ahlerstedt</p>
    </div>

    <div class="about-section">
      <p class="about-section-label">Was wir machen</p>
      <h2 class="about-h2">Merch mit Haltung.</h2>
      <p class="about-text">
        Jedes Stück in der PMPNZNG-Kollektion ist aus Bio-Baumwolle, Fairtrade-zertifiziert
        und in Europa produziert. Kein Greenwashing, kein Marketingbla.
        Wir bestellen das selbst, wir tragen das selbst.
      </p>
      <div class="stats-row">
        <div class="stat"><span class="stat-num">100%</span><span class="stat-label">Bio-Baumwolle</span></div>
        <div class="stat"><span class="stat-num">6</span><span class="stat-label">Produkte</span></div>
        <div class="stat"><span class="stat-num">EST 2021</span><span class="stat-label">Ahlerstedt, DE</span></div>
      </div>
    </div>

    <div class="about-section">
      <p class="about-section-label">Unsere Haltung</p>
      <h2 class="about-h2">Was uns antreibt.</h2>
      <div class="values-grid">
        <div class="value-card">
          <div class="value-num">01</div>
          <div class="value-title">Handwerk hat Wert</div>
          <p class="value-desc">SHK ist keine Restgröße des Arbeitsmarkts. Es ist das Fundament, auf dem alles andere steht. Das verdient Sichtbarkeit.</p>
        </div>
        <div class="value-card">
          <div class="value-num">02</div>
          <div class="value-title">Ehrlichkeit first</div>
          <p class="value-desc">Wir erzählen keine Geschichten, die wir selbst nicht glauben. Bio-Baumwolle, weil wir es so wollen — nicht weil es sich besser verkauft.</p>
        </div>
        <div class="value-card">
          <div class="value-num">03</div>
          <div class="value-title">Community über Reichweite</div>
          <p class="value-desc">Lieber 500 Leute, die es wirklich verstehen, als 50.000 Follower, die einfach scrollen. Die SHK-Community ist echt.</p>
        </div>
        <div class="value-card">
          <div class="value-num">04</div>
          <div class="value-title">Spaß erlaubt</div>
          <p class="value-desc">Ein Warmduscher-Beutel ist kein Witz — er ist ein Augenzwinkern. Handwerk darf Charakter haben.</p>
        </div>
      </div>
    </div>

    <!-- CTA -->
    <div class="about-cta">
      <h2>Jetzt die Kollektion entdecken.</h2>
      <p>Alle Produkte in Bio-Baumwolle, Fairtrade-zertifiziert. Versand innerhalb von 2–4 Werktagen.</p>
      <div class="about-cta-btns">
        <a href="/shop" class="btn btn-primary">Zum Shop</a>
        <a href="https://www.instagram.com/tgasolutions" class="btn btn-outline" rel="noopener noreferrer" target="_blank">@tgasolutions auf Instagram</a>
      </div>
    </div>

  </div>`;
---
<Base title={"Über uns — PMPNZNG"} page="about" active="ueber-uns">
  <Fragment set:html={main} />
</Base>

<style is:global>

.about-hero {
  background: var(--c-surface-1);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-xl) var(--gutter);
  position: relative; overflow: hidden;
}
.about-hero::before {
  content: 'PMPNZNG';
  position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: clamp(100px, 16vw, 200px);
  font-weight: 900; color: var(--c-surface-2); line-height: 1;
  pointer-events: none; letter-spacing: -0.02em;
}
.about-hero-inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; max-width: 720px; }
.about-eyebrow { font-size: 9px; letter-spacing: 0.32em; color: var(--c-red-bright); text-transform: uppercase; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.about-eyebrow::before { content:''; display:block; width:24px; height:2px; background:var(--c-red-bright); }
.about-hero-heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900; line-height: 0.95; text-transform: uppercase;
  margin-bottom: var(--sp-sm);
}
.about-hero-sub { font-size: 15px; color: var(--c-text-muted); line-height: 1.75; max-width: 600px; }

.about-content {
  max-width: 760px; margin: 0 auto;
  padding: var(--sp-xl) var(--gutter) var(--sp-2xl);
}
.about-section { margin-bottom: var(--sp-xl); }
.about-section-label {
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-red-bright); font-weight: 700; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.about-section-label::after { content:''; flex:1; height:1px; background:var(--c-border); }
.about-h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900; text-transform: uppercase;
  margin-bottom: var(--sp-sm); line-height: 1.05;
}
.about-text { font-size: 15px; color: var(--c-text-muted); line-height: 1.8; }
.about-text + .about-text { margin-top: 16px; }

/* Quote block */
.about-quote {
  border-left: 4px solid var(--c-red);
  padding: var(--sp-md);
  background: var(--c-surface-1);
  margin: var(--sp-md) 0;
}
.about-quote-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 900; text-transform: uppercase; line-height: 1.2;
  margin-bottom: 10px;
}
.about-quote-author { font-size: 11px; color: var(--c-text-muted); letter-spacing: 0.14em; text-transform: uppercase; }

/* Values grid */
.values-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px;
  margin-top: var(--sp-md);
}
.value-card {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  padding: var(--sp-md);
}
.value-num {
  font-family: var(--font-display); font-size: 40px; font-weight: 900;
  color: var(--c-surface-3); line-height: 1; margin-bottom: 8px;
}
.value-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 900;
  text-transform: uppercase; margin-bottom: 8px;
}
.value-desc { font-size: 12px; color: var(--c-text-muted); line-height: 1.65; }

/* Stats */
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px; margin: var(--sp-md) 0;
}
.stat {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  padding: var(--sp-md); text-align: center;
}
.stat-num {
  font-family: var(--font-display); font-size: clamp(28px,4vw,44px);
  font-weight: 900; color: var(--c-red-bright); display: block; line-height: 1;
}
.stat-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-muted); margin-top: 6px; }

/* CTA */
.about-cta {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  padding: var(--sp-lg); text-align: center; margin-top: var(--sp-xl);
}
.about-cta h2 { font-family: var(--font-display); font-size: clamp(20px,2.5vw,28px); font-weight: 900; text-transform: uppercase; margin-bottom: 12px; }
.about-cta p { font-size: 13px; color: var(--c-text-muted); margin-bottom: var(--sp-md); }
.about-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .values-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
}

</style>