---
import Base from '../../layouts/Base.astro';
const main = `<div class="workshop-layout">
    <!-- Left: Cover visual -->
    <div class="workshop-cover">
      <div class="workshop-cover-main">
        <div class="workshop-cover-bg" aria-hidden="true"></div>
        <span class="workshop-cover-eyebrow">Online Workshop</span>
        <div class="workshop-cover-title">
          Social Media<br><strong>im Handwerk.</strong>
        </div>
        <div class="workshop-cover-divider"></div>
        <div class="workshop-cover-speaker">
          <div class="workshop-cover-speaker-name">Marcel Trautwein</div>
          <div class="workshop-cover-speaker-role">Co-Geschäftsführer · TGA Solutions GmbH</div>
        </div>
        <div class="workshop-cover-stat">
          <span class="workshop-cover-stat-num">891K</span>
          <span class="workshop-cover-stat-label">Impressionen / 30 Tage</span>
        </div>
      </div>

      <!-- Curriculum preview -->
      <div class="curriculum">
        <div class="curriculum-header">Kursinhalt — 10 Module</div>
        <div class="curriculum-item">
          <span class="curriculum-num">01</span>
          <div>
            <div class="curriculum-title">Das Schaufenster-Prinzip</div>
            <div class="curriculum-sub">Warum dein Instagram dein 24/7-Schaufenster ist — und wie du es richtig nutzt.</div>
          </div>
        </div>
        <div class="curriculum-item">
          <span class="curriculum-num">02</span>
          <div>
            <div class="curriculum-title">Plattform-Strategie SHK</div>
            <div class="curriculum-sub">Instagram, TikTok, YouTube — welche Plattform bringt welche Ergebnisse für Handwerksbetriebe.</div>
          </div>
        </div>
        <div class="curriculum-item">
          <span class="curriculum-num">03</span>
          <div>
            <div class="curriculum-title">Contentstrategie & Formate</div>
            <div class="curriculum-sub">Reels, Stories, Karussells. Was funktioniert — direkt aus der Praxis von TGA Solutions.</div>
          </div>
        </div>
        <div class="curriculum-item">
          <span class="curriculum-num">04</span>
          <div>
            <div class="curriculum-title">Markenbotschafter im Betrieb</div>
            <div class="curriculum-sub">Wie du dein Team als authentische Influencer aufbaust, ohne Cringe.</div>
          </div>
        </div>
        <div class="curriculum-item">
          <span class="curriculum-num">05</span>
          <div>
            <div class="curriculum-title">Recruiting durch Reichweite</div>
            <div class="curriculum-sub">Social Media als Azubi- und Fachkräfte-Magnet — echte Fallzahlen aus Ahlerstedt.</div>
          </div>
        </div>
        <div class="curriculum-item">
          <span class="curriculum-num">06–10</span>
          <div>
            <div class="curriculum-title">+ 5 weitere Module</div>
            <div class="curriculum-sub">Analytics & KPIs · Content-Produktion ohne Agentur · SEO & AIO-Sichtbarkeit · Kundenbindung · Dein 90-Tage-Aktionsplan.</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Right: Info + ATC -->
    <div class="pdp-info" style="display:flex;flex-direction:column;gap:var(--sp-sm);">
      <nav class="pdp-breadcrumb" aria-label="Brotkrümelpfad">
        <a href="/">Start</a>
        <span aria-hidden="true">›</span>
        <a href="/shop">Shop</a>
        <span aria-hidden="true">›</span>
        <span aria-current="page">Online Workshop</span>
      </nav>
      <span class="pdp-badge-digital">Digitales Produkt</span>
      <h1 class="pdp-name">Social Media<br>im Handwerk.</h1>
      <div class="pdp-price-row">
        <span class="pdp-price">49,00 €</span>
        <span class="pdp-price-note">inkl. MwSt. · Sofort-Zugang</span>
      </div>
      <div class="pdp-divider"></div>
      <p class="pdp-desc">
        891.000 Instagram-Impressionen in 30 Tagen. 8,59 % Engagement-Rate. 86,9 % davon neue Accounts.
        Das ist nicht Glück — das ist System. Marcel Trautwein, Co-Geschäftsführer von TGA Solutions,
        zeigt dir in 10 kompakten Modulen, wie ein SHK-Betrieb aus Ahlerstedt zur bekanntesten
        Handwerkermarke im deutschsprachigen Raum wird.
      </p>

      <!-- Key stats -->
      <div class="ws-stats">
        <div class="ws-stat">
          <span class="ws-stat-num">891K</span>
          <span class="ws-stat-label">Impressionen / 30 Tage</span>
        </div>
        <div class="ws-stat">
          <span class="ws-stat-num">8,59%</span>
          <span class="ws-stat-label">Engagement-Rate</span>
        </div>
        <div class="ws-stat">
          <span class="ws-stat-num">10 Mod.</span>
          <span class="ws-stat-label">Direkt anwendbar</span>
        </div>
      </div>

      <!-- Speaker -->
      <div class="speaker-card">
        <div class="speaker-avatar">MT</div>
        <div>
          <div class="speaker-name">Marcel Trautwein</div>
          <div class="speaker-role">Co-Geschäftsführer · TGA Solutions GmbH</div>
          <div class="speaker-bio">
            Marcel hat TGA Solutions im Februar 2021 mit aufgebaut und den Betrieb
            von Grund auf digital gedacht — von Social-Media-Strategie bis
            zu Recruiting über Instagram. Seine Methode: ehrlich, messbar, wiederholbar.
          </div>
        </div>
      </div>

      <div class="pdp-divider"></div>
      <form class="atc-form" id="product-form" data-product-id="p07" novalidate>
        <input type="hidden" name="size" value="Digital">
        <button type="submit" class="btn btn-primary btn-full btn-lg" id="add-to-cart-btn">
          Jetzt Workshop kaufen — 49 €
        </button>
        <div style="display:flex; flex-direction:column; gap:8px;">
          <span class="atc-trust">Sofort-Zugang nach Bezahlung</span>
          <span class="atc-trust">Für alle SHK-Betriebsgrößen geeignet</span>
          <span class="atc-trust">Aus echten TGA-Solutions-Daten entwickelt</span>
        </div>
      </form>
      <div class="pdp-divider"></div>
      <div class="pdp-specs">
        <h3>Was du bekommst</h3>
        <ul class="spec-list">
          <li class="spec-item">10 Video-Module · direkt anwendbar</li>
          <li class="spec-item">Vorlagen, Templates &amp; Checklisten</li>
          <li class="spec-item">90-Tage-Aktionsplan für deinen Betrieb</li>
          <li class="spec-item">Zugang über Browser · kein Download nötig</li>
          <li class="spec-item">Lebenslanger Zugang nach Kauf</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Related products -->
  <section class="related-section">
    <div class="related-inner">
      <h2 class="related-heading">Dazu passt Merch</h2>
      <div class="related-grid">
        <a class="rel-card" href="/produkt/hoodie-pumpenzange">
          <div class="rel-card-img"><img src="/product-images/p06-hoodie-pumpenzange-1-freigestellt.png" alt="Hoodie Pumpenzange" width="400" height="500" loading="lazy"></div>
          <div class="rel-card-info"><div class="rel-card-name">Hoodie Pumpenzange</div><div class="rel-card-price">54,99 €</div></div>
        </a>
        <a class="rel-card" href="/produkt/tshirt-pumpenzange">
          <div class="rel-card-img"><img src="/product-images/p05-tshirt-pumpenzange-2-freigestellt.png" alt="T-Shirt Pumpenzange" width="400" height="500" loading="lazy"></div>
          <div class="rel-card-info"><div class="rel-card-name">T-Shirt Pumpenzange</div><div class="rel-card-price">27,99 €</div></div>
        </a>
        <a class="rel-card" href="/produkt/cap-shk">
          <div class="rel-card-img"><img src="/product-images/p04-cap-shk-1-freigestellt.png" alt="Cap SHK" width="400" height="500" loading="lazy"></div>
          <div class="rel-card-info"><div class="rel-card-name">Cap SHK</div><div class="rel-card-price">19,99 €</div></div>
        </a>
      </div>
    </div>
  </section>`;
---
<Base title={"Online Workshop · Social Media im Handwerk — PMPNZNG"} page="product" active="">
  <Fragment set:html={main} />
</Base>

<style is:global>

/* ——— PDP base (shared with physical products) ——— */
.pdp-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.14em; color: var(--c-text-muted);
  text-transform: uppercase; font-weight: 600;
}
.pdp-breadcrumb a { color: var(--c-text-muted); }
.pdp-breadcrumb a:hover { color: var(--c-text); }
.pdp-breadcrumb span { color: var(--c-text-dim); }
.pdp-badge {
  display: inline-block; background: var(--c-red); color: #fff;
  font-size: 8px; font-weight: 900; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 4px 12px; align-self: flex-start;
}
.pdp-badge-digital {
  display: inline-block; background: #1a3a1a; border: 1px solid #22c55e;
  color: #22c55e; font-size: 8px; font-weight: 900; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 4px 12px; align-self: flex-start;
}
.pdp-name { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.pdp-price-row { display: flex; align-items: baseline; gap: 16px; }
.pdp-price { font-family: var(--font-display); font-size: 32px; font-weight: 900; }
.pdp-price-note { font-size: 11px; color: var(--c-text-muted); }
.pdp-divider { height: 1px; background: var(--c-border); margin: 4px 0; }
.pdp-desc { font-size: 14px; color: var(--c-text-muted); line-height: 1.75; }
.atc-trust { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--c-text-muted); }
.atc-trust::before { content: '✓'; color: var(--c-red-bright); font-weight: 900; }
.pdp-specs { border-top: 1px solid var(--c-border); padding-top: var(--sp-sm); }
.pdp-specs h3 { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--c-text-muted); margin-bottom: 12px; }
.spec-list { display: flex; flex-direction: column; gap: 8px; }
.spec-item { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-text-muted); }
.spec-item::before { content: '—'; color: var(--c-red-bright); flex-shrink: 0; }

/* ——— Workshop-specific layout ——— */
.workshop-layout {
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--sp-lg) var(--gutter) var(--sp-2xl);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px); align-items: start;
}

/* Cover visual */
.workshop-cover {
  position: sticky; top: calc(var(--header-h) + 24px);
}
.workshop-cover-main {
  background: #0a0a0a;
  border: 1px solid var(--c-border);
  aspect-ratio: 4/5;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  padding: 40px;
  gap: 0;
}
.workshop-cover-bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent, transparent 39px,
      rgba(255,255,255,0.03) 39px, rgba(255,255,255,0.03) 40px
    ),
    repeating-linear-gradient(
      0deg,
      transparent, transparent 39px,
      rgba(255,255,255,0.03) 39px, rgba(255,255,255,0.03) 40px
    );
}
.workshop-cover-eyebrow {
  font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--c-red-bright); font-weight: 700;
  position: relative; z-index: 1; margin-bottom: 24px;
}
.workshop-cover-title {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px);
  font-weight: 900; text-transform: uppercase; line-height: 0.95;
  text-align: center; position: relative; z-index: 1;
}
.workshop-cover-title strong { color: var(--c-red-bright); display: block; }
.workshop-cover-divider {
  width: 48px; height: 3px; background: var(--c-red);
  margin: 24px auto; position: relative; z-index: 1;
}
.workshop-cover-speaker {
  position: relative; z-index: 1; text-align: center;
}
.workshop-cover-speaker-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.workshop-cover-speaker-role {
  font-size: 10px; color: var(--c-text-muted); letter-spacing: 0.18em;
  text-transform: uppercase; margin-top: 4px;
}
.workshop-cover-stat {
  position: absolute; bottom: 20px; right: 20px;
  background: var(--c-red); padding: 10px 14px; text-align: center;
  z-index: 2;
}
.workshop-cover-stat-num {
  font-family: var(--font-display); font-size: 18px; font-weight: 900;
  line-height: 1; display: block;
}
.workshop-cover-stat-label {
  font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-top: 2px; display: block;
}

/* Curriculum section */
.curriculum {
  border: 1px solid var(--c-border);
  margin-top: var(--sp-sm);
}
.curriculum-header {
  padding: 12px 16px;
  background: var(--c-surface-1);
  border-bottom: 1px solid var(--c-border);
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 700; color: var(--c-text-muted);
}
.curriculum-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--c-border);
  font-size: 12px;
}
.curriculum-item:last-child { border-bottom: none; }
.curriculum-num {
  font-family: var(--font-display); font-size: 11px; font-weight: 900;
  color: var(--c-red-bright); flex-shrink: 0; min-width: 20px; margin-top: 1px;
}
.curriculum-title { font-weight: 700; margin-bottom: 2px; font-size: 12px; }
.curriculum-sub { font-size: 11px; color: var(--c-text-muted); line-height: 1.5; }

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

/* Speaker card */
.speaker-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  padding: var(--sp-md); margin: var(--sp-sm) 0;
}
.speaker-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-red); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 900;
  flex-shrink: 0; overflow: hidden;
}
.speaker-avatar img { width: 100%; height: 100%; object-fit: cover; }
.speaker-name { font-family: var(--font-display); font-size: 15px; font-weight: 900; text-transform: uppercase; }
.speaker-role { font-size: 10px; color: var(--c-text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
.speaker-bio { font-size: 12px; color: var(--c-text-muted); line-height: 1.65; margin-top: 8px; }

/* Related */
.related-section { border-top: 1px solid var(--c-border); padding: var(--sp-xl) var(--gutter); }
.related-inner { max-width: var(--max-w); margin: 0 auto; }
.related-heading { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); font-weight: 900; text-transform: uppercase; margin-bottom: var(--sp-md); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.rel-card { background: var(--c-card); color: var(--c-card-text); text-decoration: none; display: block; }
.rel-card-img { aspect-ratio: 4/5; overflow: hidden; background: var(--c-card); }
.rel-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px 16px 0; transition: transform 0.4s var(--ease-out); }
.rel-card:hover .rel-card-img img { transform: scale(1.04); }
.rel-card-info { padding: 14px 16px; }
.rel-card-name { font-family: var(--font-display); font-size: 13px; font-weight: 900; text-transform: uppercase; margin-bottom: 4px; }
.rel-card-price { font-size: 13px; font-weight: 700; color: #333; }

@media (max-width: 1024px) { .workshop-layout { grid-template-columns: 1fr; } .workshop-cover { position: static; } }
@media (max-width: 600px) { .related-grid { grid-template-columns: repeat(2, 1fr); } .ws-stats { grid-template-columns: 1fr; } }

</style>