/* Sam's article — How to Hang Something Heavy Without Asking Anyone for Help
 * Renders into #render-target. Source content: scripts/insert-sam-post.ts.
 * Format: Sam editorial (patchhole.jsx) — Hero, Lede, WhatYouNeed, Steps, HotTakes, Redo, Comments, Signoff.
 */

const { useState } = React;

const SamSays = ({ children }) => (
  <div className="sa-step-says">
    <span className="who">— Sam</span>
    <p>{children}</p>
  </div>
);

/* ============ CRUMBS ============ */
const Crumbs = () => (
  <nav className="sa-crumbs" aria-label="Breadcrumb">
    <div className="l">
      <a href="/">Start</a>
      <span>/</span>
      <a href="/de/contributors/sam/">Sam</a>
      <span>/</span>
      <span>How-to</span>
      <span>/</span>
      <span style={{ color: "#EFE5CF" }}>Etwas Schweres aufhängen</span>
    </div>
    <div className="r">
      <span>Ausgabe 04 · Frühjahr '26</span>
      <span className="by">geschrieben von Sam ✦</span>
    </div>
  </nav>
);

/* ============ HERO ============ */
const Hero = () => (
  <section className="sa-hero">
    <div
      className="img"
      style={{
        backgroundImage:
          "url('https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=2000&q=80')",
      }}
    />
    <div className="sa-hero-wrap">
      <div>
        <div className="sa-hero-kicker">
          <span>How-to</span>
          <span className="dot">●</span>
          <span>Nr. 02</span>
          <span className="dot">●</span>
          <span className="sig">geschrieben von Sam</span>
        </div>
        <h1>
          Wie man <em>etwas Schweres</em> aufhängt, ohne jemanden um Hilfe zu bitten
        </h1>
        <p className="standfirst">
          Die Wand wird nicht gewinnen. Ortungsgerät, der richtige Dübel, eine Wasserwaage, ein vorgebohrtes Pilotloch und die Disziplin, einen Schritt zurückzutreten, bevor du entscheidest, dass es schief hängt. Sechs Schritte, 45 Minuten, keine zweite Person nötig.
        </p>
      </div>
      <div className="sa-hero-side">
        <div className="row">
          <span>Zeit</span>
          <span className="v">~45 Min. <span style={{opacity:0.5}}>+ Flicken, falls</span></span>
        </div>
        <div className="row">
          <span>Kosten</span>
          <span className="v">$8–$15</span>
        </div>
        <div className="row">
          <span>Schwierigkeit</span>
          <span className="v">Sturköpfig machbar</span>
        </div>
        <div className="row">
          <span>Sauereifaktor</span>
          <span className="v warn">●○○ Staub</span>
        </div>
        <div className="row">
          <span>Aktualisiert</span>
          <span className="v">Frühjahr '26</span>
        </div>
      </div>
    </div>
    <div className="sa-hero-scribble">
      keine zweite Person. <u>versprochen</u>.
      <svg viewBox="0 0 60 30" fill="none">
        <path d="M2 22 C 12 8, 28 4, 56 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        <path d="M48 6 L 56 12 L 50 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>
    </div>
  </section>
);

/* ============ LEDE ============ */
const Lede = () => (
  <section className="sa-lede">
    <div className="sa-lede-wrap">
      <aside className="sa-lede-side">
        <div className="marker">In dieser Anleitung</div>
        <ul>
          <li>Der Spiegel wandert seit Wochen</li>
          <li>Was du wirklich brauchst</li>
          <li>Die 6 Schritte</li>
          <li>Hot Takes</li>
          <li>Was ich anders machen würde</li>
        </ul>
      </aside>

      <div className="sa-lede-body">
        <p className="dropcap">
          Du hast diesen Spiegel seit drei Wochen von Raum zu Raum getragen, weil du dich nicht entscheiden kannst, wo er hingehört. Du hast dich entschieden. <em>Er kommt dorthin.</em> An diese Wand. Heute.
        </p>

        <p>
          Und du bittest niemanden, dir dabei zu helfen. Du brauchst keine zweite Person. Du brauchst ein Ortungsgerät, den richtigen Dübel, eine Wasserwaage und die Disziplin, <strong>einen Schritt zurückzutreten, bevor du entscheidest, dass es schief hängt.</strong> Das ganze Projekt dauert fünfundvierzig Minuten, wenn du es richtig machst, und zwei Stunden, wenn du ein Loch flicken musst — und wir machen es richtig.
        </p>

        <div className="sa-pullquote">
          <p>
            Gipskarton allein hält keine Schraube unter echter Last. Die Wand ist Gips und Papier. Die Ständer sind Holz. Finde das Holz, oder benutz einen echten Dübel.
          </p>
        </div>

        <p>
          Dieser Satz ist der ganze Artikel. Der Rest ist nur, wie man das Holz findet, was als echter Dübel zählt, und warum du eine Vier-Dollar-Wasserwaage kaufen solltest, statt deinen Augen zu vertrauen.
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">Sams Notiz</span>
        <h4>Bevor du irgendwo bohrst</h4>
        <p>
          Wenn dein Haus vor 1980 gebaut wurde, ist die Wand vielleicht Putz und Lattung, kein Gipskarton. <em>Andere Dübel.</em> Andere Regeln. Wenn das Klopfen quer durch dumpf-dumpf-dumpf-dumpf klingt, ist das Putz — stopp und schau Putz-Dübel nach.
        </p>
      </aside>
    </div>
  </section>
);

/* ============ WHAT YOU NEED ============ */
const WhatYouNeed = () => (
  <section className="sa-need">
    <div className="sa-need-wrap">
      <div>
        <div className="sa-need-head">§ 01 / Werkzeuge</div>
        <h2>
          Was du <em>wirklich</em> brauchst
        </h2>
        <p className="body">
          Gesamtbudget: <strong>$8–$15</strong> an Material. Der Großteil der Kosten ist die Wasserwaage — und die Wasserwaage ist das Ding, das du für jedes Projekt für den Rest deines Lebens benutzen wirst. <strong>Kauf die Vier-Dollar-Wasserwaage.</strong>
        </p>

        <div className="sa-need-dont">
          <span className="lab">Spar dir</span>
          <ul>
            <li>
              Die Plastikdübel, die in der Schachtel waren
              <span className="why">Bestenfalls dekorativ. Kippdübel sind der Weg.</span>
            </li>
            <li>
              Per Augenmaß ausrichten
              <span className="why">Du wirst es wissen. Jeden Tag. Jahrelang.</span>
            </li>
            <li>
              Einen Nagel reinhämmern und hoffen
              <span className="why">Für einen Rahmen unter einem Kilo, okay. Für alles Schwere, nein.</span>
            </li>
          </ul>
        </div>
      </div>

      <ul className="sa-need-list">
        <li>
          <span className="item">
            Ortungsgerät (oder dein Knöchel)
            <span className="why">8–15 Dollar für das billigste. Oder benutz den Knöcheltest kostenlos.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Akkuschrauber (kabellos, jede Größe)
            <span className="why">Leih dir einen, wenn du keinen besitzt. Kauf keinen für 300 Dollar, um einen Spiegel aufzuhängen.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Libellen-Wasserwaage (24" oder länger)
            <span className="why">4 Dollar in jedem Baumarkt. Die besten vier Dollar, die du für dieses Projekt ausgibst.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Kippdübel ODER Gewinde-Gipskartondübel
            <span className="why">Ausgelegt für das doppelte Gewicht, das du aufhängst. Lies das Etikett.</span>
          </span>
          <span className="qty">×2–4</span>
        </li>
        <li>
          <span className="item">
            Eine gute Schraube, Länge an deinen Dübel angepasst
            <span className="why">Kommt meist mit dem Dübelpaket.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Bleistift
            <span className="why">Zum Markieren von Ständern und der Stelle. Kein Permanentmarker. Bleistift.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Kaffee
            <span className="why">Nicht verhandelbar.</span>
          </span>
          <span className="qty">×1 Tasse</span>
        </li>
      </ul>
    </div>
  </section>
);

/* ============ STEPS ============ */
const STEPS = [
  {
    n: "01",
    phase: "Finden · 5 Min.",
    title: "Finde zuerst den Ständer. Immer.",
    flip: false,
    body: (
      <>
        <p>
          Klopf mit deinem Knöchel an der Wand entlang, bis sich der Klang von <em>hohl</em> zu <em>fest</em> ändert. Das ist der Ständer. Das ist gerade dein bester Freund. Ein Ortungsgerät funktioniert auch — aber ehrlich, dein Knöchel ist kostenlos und schon an dir dran.
        </p>
        <p>
          Ständer sind typischerweise <strong>sechzehn Zoll auf Mitte voneinander entfernt.</strong> Sobald du einen findest, kannst du den nächsten meistens ohne Kontrolle finden. Markiere jeden mit Bleistift, damit du nicht den Überblick verlierst, wenn du anfängst zu bohren.
        </p>
      </>
    ),
    tip: { lab: "Knöchel vs. Ortungsgerät", text: "Der Knöcheltest ist schneller und kostenlos, aber Ortungsgeräte sind zuverlässiger bei Putzwänden und Wänden mit Dämmung. Wenn du neu dabei bist, kauf das 10-Dollar-Ortungsgerät. Es bezahlt sich beim ersten Mal aus, wenn es dir ein Loch erspart." },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Abb. 01 · Der Ständer",
      cap: "Holz, hinter dem Gips.",
    },
    says: "Markiere jeden Ständer, den du findest, nicht nur den, den du benutzt. Du brauchst sie beim nächsten Mal.",
  },
  {
    n: "02",
    phase: "Dübel · 5 Min.",
    title: "Wenn dort kein Ständer ist, wo du ihn brauchst, nimm den richtigen Dübel.",
    flip: true,
    body: (
      <>
        <p>
          Nicht alle Wanddübel sind gleich. Die kleinen Plastikteile, die in der Schachtel mit dem Ding sind, das du gekauft hast, sind meistens <em>Müll</em>. Hol dir einen Kippdübel oder einen Gewinde-Gipskartondübel, der für mehr Gewicht ausgelegt ist als das, was du aufhängst.
        </p>
        <p>
          <strong>Verdopple es.</strong> Vertrau nichts. Das Etikett auf dem Dübel sagt dir die Nennlast — lies es vor dem Kauf. Ein schwerer Spiegel wiegt mehr, als du denkst. Ein Spiegel plus ein Kind, das daran zieht, wiegt noch mehr.
        </p>
      </>
    ),
    warn: { lab: "Achtung", text: "Wenn du einen Garderobenhaken aufhängst, der echte Mäntel halten wird, geh in einen Ständer. Kein Dübel. Garderobenhaken versagen dramatisch — sie bekommen mehr Gewicht ab, als du je erwartest, und der Versagensmodus ist, dass der Haken einen Brocken Wand rausreißt." },
    fig: {
      img: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=1200&q=80",
      tag: "Abb. 02 · Der Dübel",
      cap: "Metall, Gewinde, ausgelegt.",
    },
  },
  {
    n: "03",
    phase: "Wasserwaage · 1 Min.",
    title: "Benutz eine Wasserwaage.",
    flip: false,
    body: (
      <>
        <p>
          Ich weiß, du denkst, du kannst es per Augenmaß. <em>Kannst du nicht.</em> Niemand kann das. <strong>Benutz die Wasserwaage.</strong> Investiere die zusätzlichen vierzig Sekunden. Du wirst jeden einzelnen Tag auf das Ding starren und du wirst wissen, wenn es ein halbes Grad schief ist.
        </p>
        <p>
          Die Wasserwaage kostet vier Dollar in jedem Baumarkt. Es sind die besten vier Dollar, die du für dieses Projekt ausgeben kannst. Wenn du noch keine besitzt, kauf eine, bevor du irgendetwas anderes in diesem Artikel machst.
        </p>
      </>
    ),
    tip: { lab: "Smartphone-Wasserwaagen-Apps", text: "Sie funktionieren, aber sie sind langsamer als eine echte Libellen-Wasserwaage und sie verlangen, dass du das Telefon ruhig hältst. Die Libellen-Wasserwaage ist schneller, genauer und braucht keine Ladung. Kauf die Libellen-Wasserwaage." },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Abb. 03 · Die Wasserwaage",
      cap: "die billigste Versicherung, die du je kaufst.",
    },
    says: "Halte die Wasserwaage oben auf den Spiegelrahmen, nicht an die Wand. Der Spiegel ist das, was Leute sehen werden. Die Wand ist das, was Leute nicht sehen werden.",
  },
  {
    n: "04",
    phase: "Bohren · 2 Min.",
    title: "Bohre das Pilotloch vor.",
    flip: true,
    body: (
      <>
        <p>
          Drück die Schraube nicht direkt in den Gipskarton. Bohre ein Pilotloch vor, das etwas kleiner als deine Schraube ist. <em>Sie geht sauberer rein. Sie hält besser. Die Wand respektiert es mehr.</em>
        </p>
        <p>
          Wenn du einen Dübel verwendest, sagt dir die Dübelschachtel, welchen Bohrer du nehmen sollst — passe ihn genau an. Wenn du in einen Ständer gehst, reicht ein 1/16-Zoll-Pilotloch.
        </p>
      </>
    ),
    warn: { lab: "Wenn du auf etwas Hartes stößt", text: "Stopp. Sofort. Das ist entweder ein Rohr oder ein Kabel und keines davon ist heute dein Freund. Zieh raus, versetze vier Zoll, versuche es erneut. Die Wand hat Zeug innen drin, und das Zeug innen drin ist wichtiger als der Spiegel." },
    fig: {
      img: "https://images.unsplash.com/photo-1572297870735-d68a30c0e603?w=1200&q=80",
      tag: "Abb. 04 · Das Pilot",
      cap: "klein, gezielt, mit Absicht.",
    },
  },
  {
    n: "05",
    phase: "Aufhängen · 5 Min.",
    title: "Häng es auf. Tritt zurück. Berühr es nicht.",
    flip: false,
    body: (
      <>
        <p>
          Häng das Ding auf. Tritt zurück. <em>Schau es zehn Sekunden lang an, bevor du entscheidest, dass es schief hängt.</em>
        </p>
        <p>
          Wahrscheinlich hängt es nicht schief. Du bist nur noch nicht daran gewöhnt, dass es da ist. Wenn es dich nach zehn Sekunden immer noch stört und eine Wasserwaage eine Schräglage bestätigt, dann passe an. <strong>Wenn du angepasst hast, weil es sich „falsch" anfühlte, und die Wasserwaage sagt, es ist okay, hast du es tatsächlich schief gemacht.</strong> Vertrau der Wasserwaage mehr als deinen Augen.
        </p>
      </>
    ),
    tip: { lab: "Mach ein Foto", text: "Von der anderen Seite des Raums, mit Blitz an. Die Kamera sieht, was deine Augen nicht können — leichte Schräglagen, Parallaxen-Illusionen, Staub. Pass basierend auf dem Foto an, nicht der Live-Ansicht. Das Foto ist das, was Leute sehen werden, wenn sie reinkommen." },
    fig: {
      img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80",
      tag: "Abb. 05 · Das Aufhängen",
      cap: "Zehn-Sekunden-Regel. Immer.",
    },
    says: "Wenn du dreimal anpasst, stopp. Geh weg. Mach Kaffee. Komm in fünf Minuten zurück. Deine Augen kalibrieren sich neu.",
  },
  {
    n: "06",
    phase: "Fertig",
    title: "Der Siegesmoment.",
    flip: true,
    body: (
      <>
        <p>
          Es hängt. Es ist gerade. Nichts ist gefallen. <em>Du hast niemanden um Hilfe gebeten und musstest es nicht.</em>
        </p>
        <p>
          <strong>Das war's.</strong> Mach ein Foto. Schick es an wen auch immer an dir gezweifelt hat. Mach mit deinem Leben weiter. Es gibt etwas spezifisch Befriedigendes daran, etwas Schweres alleine aufzuhängen — größer als das Projekt, kleiner als eine religiöse Erfahrung. Sitz eine Sekunde damit.
        </p>
      </>
    ),
    fig: {
      img: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1200&q=80",
      tag: "Abb. 06 · Der Sieg",
      cap: "die Wand hat nicht gewonnen.",
    },
    says: "Wenn es ein Spiegel ist, ist das Erste, was du darin siehst, dein Gesicht, nachdem du einen Spiegel allein aufgehängt hast. Das ist ein gutes Gesicht.",
  },
];

const Step = ({ data }) => (
  <article className={`sa-step ${data.flip ? "flip" : ""}`}>
    <div className="sa-step-text">
      <div className="sa-step-meta">
        <span className="sa-step-num">{data.n}</span>
        <span className="sa-step-phase">{data.phase}</span>
      </div>
      <h3>{data.title}</h3>
      <div className="sa-step-body">{data.body}</div>
      {data.tip && (
        <div className="sa-step-tip">
          <span className="lab">{data.tip.lab}</span>
          <p>{data.tip.text}</p>
        </div>
      )}
      {data.warn && (
        <div className="sa-step-warn">
          <span className="lab">{data.warn.lab}</span>
          <p>{data.warn.text}</p>
        </div>
      )}
    </div>
    <figure className="sa-step-fig">
      <div className="frame">
        <span className="tag">{data.fig.tag}</span>
        <img src={data.fig.img} alt="" loading="lazy" />
      </div>
      <figcaption>{data.fig.cap}</figcaption>
      {data.says && <SamSays>{data.says}</SamSays>}
    </figure>
  </article>
);

const Steps = () => (
  <section className="sa-steps">
    <div className="sa-steps-wrap">
      <header className="sa-steps-head">
        <h2>
          Die <em>sechs</em> Schritte
        </h2>
        <span className="count">06 SCHRITTE · ≈45 MIN. AKTIV</span>
      </header>
      {STEPS.map((s) => (
        <Step key={s.n} data={s} />
      ))}
    </div>
  </section>
);

/* ============ HOT TAKES ============ */
const HotTakes = () => (
  <section className="sa-hottakes">
    <div className="sa-hottakes-wrap">
      <header className="sa-hottakes-head">
        <span className="lab">Sams Hot Takes</span>
        <h2>
          Dinge, die ich <em>satt</em> habe
        </h2>
      </header>
      <div className="sa-hottakes-list">
        <div className="sa-take">
          <div className="num">i.</div>
          <h3>Dem Plastikdübel in der Schachtel vertrauen</h3>
          <p>
            Sie kamen kostenlos mit dem Ding, das du gekauft hast. Sie sind aus einem Grund kostenlos. Kippdübel kosten zwei Dollar. Der Spiegel kostet mehr als zwei Dollar. Mathe.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">ii.</div>
          <h3>Aufhängen, ohne zuerst den Ständer zu finden</h3>
          <p>
            Selbst wenn du am Ende einen Dübel benutzt, sagt dir das Wissen, wo die Ständer sind, wo die <em>Nicht</em>-Ständer sind. In ein Rohr zu bohren, weil du den Ständer-Check übersprungen hast, ist ein tausend-Dollar-Fehler.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iii.</div>
          <h3>„Ich nehm einfach einen Nagel"</h3>
          <p>
            Für eine Postkarte, okay. Für alles, was kaputt geht, wenn es fällt, nein. Nägel ziehen sich unter Last gerade raus. Schrauben haben Gewinde. Das Gewinde ist der ganze Sinn.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iv.</div>
          <h3>Jemanden bitten, „das mal kurz zu halten"</h3>
          <p>
            Sie können die Wasserwaage aus deinem Winkel nicht ablesen. Sie werden in acht Sekunden müde. Sie wollen buchstäblich alles andere tun. <em>Häng es selbst auf.</em> Darum geht es in diesem Artikel.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ============ WHAT I'D DO DIFFERENTLY ============ */
const Redo = () => (
  <section className="sa-redo">
    <div className="sa-redo-wrap">
      <aside className="sa-redo-side">
        was ich
        <br />
        <em style={{ color: "#D97A4F" }}>anders machen würde</em>
        <svg viewBox="0 0 80 60" fill="none">
          <path d="M5 12 C 25 6, 55 14, 70 38" stroke="#91A86C" strokeWidth="2" strokeLinecap="round" />
          <path d="M64 30 L 70 38 L 60 42" stroke="#91A86C" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </aside>
      <div>
        <h2>
          Was ich beim nächsten Mal <em>anders machen würde</em>
        </h2>
        <p>
          Das erste Schwere, das ich allein aufgehängt habe, da habe ich die Plastikdübel benutzt, die in der Schachtel waren. Innerhalb eines Monats neigte sich der Spiegel. Innerhalb von zwei Monaten lag er auf dem Boden. <strong>Die Plastikdübel, die in der Schachtel waren, sind dekorativ.</strong> Sie sind nicht tragend. Benutz einen echten Dübel.
        </p>
        <p>
          Was ich <strong>meinem früheren Ich</strong> sagen würde: kauf eine längere Wasserwaage, als du denkst, dass du brauchst. Die 24-Zoll-Wasserwaage ist das Minimum. Die 48-Zoll ist besser. Du wirst sie für jedes Regal, jede Galerie-Wand, jede Gardinenstange für den Rest deines Lebens benutzen. Je länger die Wasserwaage, desto genauer das Ablesen.
        </p>
        <p>
          Und ich würde den Foto-Schritt vor den Anpassen-Schritt setzen. Sobald du zweimal von Hand angepasst hast, lügen dich deine Augen an. Das Foto lügt nicht. <em>Vertrau dem Foto.</em>
        </p>
      </div>
    </div>
  </section>
);

/* ============ COMMENTS ============ */
const Comments = () => (
  <section className="sa-comments">
    <div className="sa-comments-wrap">
      <header className="sa-comments-head">
        <h2>
          Von den <em>Lesern</em>
        </h2>
        <span className="meta">19 BRIEFE · MEISTENS SPIEGEL</span>
      </header>

      <div className="sa-comment">
        <div className="who">
          <span className="n">James T.</span>
          <span>Brooklyn, NY</span>
          <span className="when">vor 1 Woche</span>
        </div>
        <div className="body">
          <p>
            Ich bin 47 und habe noch nie einen Akkuschrauber besessen. Dein „Kauf einfach den billigsten"-Aufsatz hat mich überzeugt, es zu probieren, und ich habe Regale in das Zimmer meiner Tochter gehängt. Sie hält mich jetzt für einen Zauberer.
          </p>
          <div className="sa-reply">
            <span className="lab">Sam antwortete</span>
            <p>
              James, du BIST ein Zauberer. Verrate ihr nicht den Trick.
              <span className="sig">— S</span>
            </p>
          </div>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Priya K.</span>
          <span>Toronto, ON</span>
          <span className="when">vor 2 Wochen</span>
        </div>
        <div className="body">
          <p>
            Frage — ich bin dieser Anleitung gefolgt, aber meine Wände sind Putz und Lattung, kein Gipskarton. Andere Dübel? Oder ist der ganze Ansatz falsch?
          </p>
          <div className="sa-reply">
            <span className="lab">Sam antwortete</span>
            <p>
              Putz bekommt seine eigene Anleitung — kommt nächsten Monat. Halt dich zurück, du bist zurecht vorsichtig. Putz-Dübel sind ein anderes Tier.
              <span className="sig">— S</span>
            </p>
          </div>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Reggie B.</span>
          <span>Atlanta, GA</span>
          <span className="when">vor 3 Wochen</span>
        </div>
        <div className="body">
          <p>
            Habe einen 18-Kilo-Spiegel allein über der Eingangskonsole aufgehängt. Kippdübel, zwei davon, in den Gipskarton über dem Türrahmen. Solide. Frau kam nach Hause und nahm an, ich hätte Hilfe bekommen. Hatte ich nicht.
          </p>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Sara M.</span>
          <span>Seattle, WA</span>
          <span className="when">vor 1 Monat</span>
        </div>
        <div className="body">
          <p>
            Beim ersten Versuch in ein Kabel gebohrt. Der Schalter ist rausgesprungen, kein Feuer, keine Verletzung, aber ich musste einen Elektriker für 180 Dollar rufen, um das Innere der Wand zu reparieren. Lektion: Die „wenn du auf etwas Hartes stößt, stopp"-Regel ist kein Vorschlag.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ============ SIGNOFF ============ */
const Signoff = () => (
  <section className="sa-signoff">
    <div className="sa-signoff-wrap">
      <div>
        <h2>
          Das war's. <em>Häng das Ding auf.</em>
        </h2>
        <p>
          Wenn du fertig bist — oder auf halbem Weg feststeckst und mit einem Akkuschrauber dastehst und zweifelst — schick ein Foto. Ich lese alles, was reinkommt. Triumph-Fotos bevorzugt. Fehlschlags-Fotos auch willkommen.
        </p>
        <div className="sig">— Sam</div>
        <div className="ctas" style={{ marginTop: 28 }}>
          <a href="/contact/" className="btn primary">
            Foto schicken →
          </a>
          <a href="/de/contributors/sam/" className="btn ghost">
            Mehr von Sam
          </a>
        </div>
      </div>
      <div className="sa-readnext">
        <span className="lab">Lies als nächstes</span>
        <a href="/de/contributors/sam/how-to-refinish-a-thrifted-chair/">
          <span>Einen Trödel-Stuhl aufarbeiten</span>
          <span className="m">3 STD.</span>
        </a>
        <a href="/en/install/living-room/">
          <span>Installieren × Wohnzimmer — Halterungen und Aufhängungen</span>
          <span className="m">HUB</span>
        </a>
        <a href="/en/install/bedroom/">
          <span>Installieren × Schlafzimmer — Regale, Rahmen, Lampen</span>
          <span className="m">HUB</span>
        </a>
        <a href="/de/contributors/sam/">
          <span>Alle Anleitungen von Sam</span>
          <span className="m">PROFIL</span>
        </a>
      </div>
    </div>
  </section>
);

/* ============ ROOT ============ */
const Article = () => (
  <div className="sa">
    <Crumbs />
    <Hero />
    <Lede />
    <WhatYouNeed />
    <Steps />
    <HotTakes />
    <Redo />
    <Comments />
    <Signoff />
  </div>
);

ReactDOM.createRoot(document.getElementById("render-target")).render(<Article />);
