/* ============================================================
   Scharfes Zeug – Design Library
   Abgeleitet 1:1 aus der Original-Jimdo-Seite (scharfeszeug.jimdofree.com)
   Fonts: Lato (Headlines) · Source Sans (Fließtext) – selbst gehostet
   Leitfarbe: #de0000  ·  Fließtext: #444  ·  Hintergrund: weiß
   ============================================================ */

/* ---- Design-Tokens ---- */
:root {
  --sz-red:        #de0000;   /* Headlines, Linien, Buttons (aus Jimdo ausgelesen) */
  --sz-red-dark:   #b40000;   /* Hover */
  --sz-ink:        #444444;   /* Fließtext */
  --sz-ink-strong: #222222;
  --sz-white:      #ffffff;
  --sz-bg-soft:    #f4f4f4;

  --sz-font-head: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sz-font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sz-maxw: 980px;
  --sz-gap: 30px;
}

/* ---- Basis ---- */
*, *::before, *::after { box-sizing: border-box; }
body.sz {
  margin: 0;
  background: var(--sz-white);
  color: var(--sz-ink);
  font-family: var(--sz-font-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.sz img { max-width: 100%; height: auto; display: block; }
body.sz a:not(.sz-btn) { color: var(--sz-red); }

/* ---- Layout ---- */
.sz-wrap { max-width: var(--sz-maxw); margin: 0 auto; padding: 0 20px; }
.sz-wrap--narrow { max-width: 760px; }
.sz-section { padding: 48px 0; }
.sz-center { text-align: center; }

/* ---- Typografie ---- */
.sz-h1 {
  font-family: var(--sz-font-head);
  font-weight: 300;                    /* Lato Light – der schlanke Jimdo-Look */
  color: var(--sz-red);
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(2.1rem, 6vw, 4rem); /* 64px */
  line-height: 1.05;
  margin: 0 0 .5em;
}
.sz-h2 {
  font-family: var(--sz-font-head);
  font-weight: 400;
  color: var(--sz-red);
  font-size: clamp(1.55rem, 4vw, 2.25rem); /* 36px */
  line-height: 1.25;
  margin: 0 0 .5em;
}
.sz-h3 {
  font-family: var(--sz-font-head);
  font-weight: 400;
  color: var(--sz-red);
  text-align: center;
  font-size: 1.5rem;                   /* 24px */
  line-height: 1.25;
  margin: 0 0 .3em;
}
.sz-lead { font-size: 1.18rem; color: var(--sz-ink); }
body.sz p { margin: 0 0 1em; }
body.sz p:last-child { margin-bottom: 0; }
.sz-muted { color: #777; }
.sz-strong { color: var(--sz-ink-strong); font-weight: 600; }

/* ---- Trennlinie (dünn, rot – wie Jimdo) ---- */
.sz-rule { border: 0; border-top: 2px solid var(--sz-red); margin: 0; }
.sz-rule--soft { border-top-color: #e9c9c9; }

/* ---- Button ---- */
.sz-btn {
  display: inline-block;
  background: var(--sz-red);
  color: #fff;
  border: 1px solid var(--sz-red);
  padding: 12px 22px;
  border-radius: 0;                    /* eckig – wie Jimdo */
  font-family: var(--sz-font-body);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background .12s, color .12s;
}
.sz-btn:hover { background: #fff; color: var(--sz-red); }

/* ---- Kopf / Nav ---- */
.sz-topbar { border-bottom: 2px solid var(--sz-red); }
.sz-topbar .sz-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.sz-topbar__logo { width: clamp(190px, 34vw, 260px); }
.sz-topbar__links { display: flex; gap: 22px; }
.sz-topbar a { color: var(--sz-ink); text-decoration: none; font-size: .95rem; }
.sz-topbar a:hover { color: var(--sz-red); }

/* ---- Hero (Vollbild-Bannerbild) ---- */
.sz-hero { width: 100%; }
.sz-hero img { width: 100%; display: block; }

/* ---- Kachel-Raster (3 Spalten – wie Jimdo) ---- */
.sz-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px var(--sz-gap); }
.sz-tile { margin: 0; }
.sz-tile img { width: 100%; border-radius: 2px; display: block; }
.sz-tile figcaption { margin-top: 12px; color: var(--sz-ink); font-size: 1rem; }
@media (max-width: 820px) { .sz-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sz-tiles { grid-template-columns: 1fr; } }

/* ---- Produkt-Kacheln ---- */
.sz-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sz-gap); max-width: 760px; margin: 0 auto; }
.sz-products figure { margin: 0; text-align: center; }
.sz-products img { width: 100%; height: 260px; object-fit: contain; background: var(--sz-bg-soft); border-radius: 4px; padding: 12px; }
.sz-products figcaption { margin-top: 12px; }
.sz-products small { display: block; color: var(--sz-ink); margin-top: 2px; }
@media (max-width: 540px) { .sz-products { grid-template-columns: 1fr; } }

/* ---- Voll-Band-Bild ---- */
.sz-band img { width: 100%; display: block; border-radius: 2px; }

/* ---- Zitat ---- */
.sz-quote { border-left: 4px solid var(--sz-red); padding: 6px 0 6px 22px; margin: 0; }
.sz-quote p { font-size: 1.2rem; color: var(--sz-ink-strong); }
.sz-quote cite { font-style: normal; color: var(--sz-red); font-weight: 600; }

/* ---- Footer ---- */
.sz-foot { border-top: 2px solid var(--sz-red); padding: 26px 0; color: var(--sz-ink); font-size: .95rem; }
.sz-foot .sz-wrap { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; align-items: baseline; }
.sz-foot a { color: var(--sz-red); text-decoration: none; }
.sz-foot a:hover { text-decoration: underline; }

/* ---- Utilities ---- */
.sz-stack > * + * { margin-top: 1em; }
.sz-mt { margin-top: 28px; }