/* ==========================================================================
   Seite: MECHANIK 3000 – Gesamtpaket (Produkte/Mechanik3000.aspx)
   Inhalt: Kopf in Metall-Optik mit Logo-Zeichen und Kennzahlen, darunter
   «Vorteile auf einen Blick» (acht Karten), «Technische Details» und
   «Downloads» nebeneinander, am Ende das Band «Kostenloses Erstgespräch»
   (Grundaufbau des Kopfs: .page-hero in Infoseite.css,
   Erstgespräch: .cta-band in Global.css, Download-Liste: Infoseite.css)
   ========================================================================== */

/* ==========================================================================
   Kopf in Metall-Optik (in beiden Modi gleich): Stahl-Verlauf mit feiner
   Schliff-Struktur wie gebürstetes Metall
   ========================================================================== */
.page-hero.m3-hero {
  --color-heading: var(--color-white); /* Text auf dem Metall weiss */
  --color-copy: var(--color-white);
  align-items: flex-start;
  margin-bottom: 0;
  padding: 2.2rem 2.2rem 2rem;
  border-color: #8b939d;
  color: var(--color-white);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 7px),
    linear-gradient(140deg, #6f7782 0%, #9ca4af 38%, #5a616b 100%);
  box-shadow: 0 16px 36px rgba(40, 46, 56, 0.22);
}

/* Bildzeichen des Logos (Quadrat mit Zahnrad und Maus): die Original-Datei wird nur
   verschoben und abgeschnitten angezeigt, Pixel und Farben bleiben unverändert.
   Das Zeichen liegt in der Datei (931 x 231 px) ab x = 702 und ist 229 px breit. */
.m3-mark {
  --mark: 72px;
  flex: 0 0 auto;
  display: block;
  width: calc(var(--mark) * 229 / 231);
  height: var(--mark);
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 10px 24px rgba(20, 26, 36, 0.3);
}

/* Logo-Datei im Ausschnitt (nur verschoben, nicht verändert) */
.m3-mark img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  margin-left: calc(var(--mark) * -702 / 231);
}

/* Titel und Einleitungstext im Kopf (weiss auf Metall) */
.m3-hero h1,
.m3-hero .page-lead,
.m3-hero .page-lead strong {
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.m3-hero .page-lead {
  max-width: 720px;
}

/* Kennzahlen als schlanke Zeile, getrennt durch feine Linien */
.m3-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0;
  margin: 1.4rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Eine Kennzahl */
.m3-facts li {
  display: grid;
  gap: 0.15rem;
  padding: 0 1.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Erste Kennzahl ohne Trennlinie links */
.m3-facts li:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Zahl bzw. Kürzel der Kennzahl */
.m3-facts strong {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.15rem;
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

/* Beschriftung der Kennzahl */
.m3-facts span {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
}

/* Schweizerkreuz in der Kennzahl «Made in Switzerland» */
.m3-swiss {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* ==========================================================================
   Inhalt unter dem Kopf: Abschnitte untereinander
   ========================================================================== */
.m3-page {
  display: grid;
  gap: 2.4rem;
}

/* Abschnitts-Überschriften («Vorteile auf einen Blick» usw.) */
.m3-page h2 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
}

/* ==========================================================================
   Vorteile auf einen Blick: acht Karten in vier Spalten
   ========================================================================== */
.m3-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

/* Eine Vorteils-Karte */
.m3-benefit {
  padding: 1.4rem 1.3rem;
  border-radius: var(--radius-container);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

/* Icon der Vorteils-Karte, dezent getönt wie im Menü (Klasse tone-…, siehe Global.css) */
.m3-benefit-icon {
  --icon-size: 46px;
  margin-bottom: 0.85rem;
}

/* Titel und Text der Vorteils-Karte */
.m3-benefit h3 {
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
}

.m3-benefit p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ==========================================================================
   Technische Details und Downloads: zwei Karten nebeneinander
   ========================================================================== */
.m3-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

/* Eine der beiden Karten */
.m3-panel {
  padding: 1.6rem 1.6rem 1.4rem;
}

/* Überschrift und Einleitung in der Karte */
.m3-page .m3-panel h2 {
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
}

.m3-panel > p {
  margin: 0 0 1rem;
  line-height: 1.5;
}

/* Technische Details: Kürzel als kleine Metall-Plakette, daneben die Bedeutung */
.m3-tech {
  border-top: 1px solid var(--pdf-line);
}

/* Eine Zeile (z. B. Swissdec, QR-Rechnung) */
.m3-tech li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.6rem;
  border-bottom: 1px solid var(--pdf-line);
}

/* Plakette mit dem Kürzel */
.m3-tech strong {
  flex: 0 0 auto;
  min-width: 3.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-white);
  background: linear-gradient(140deg, #6f7782 0%, #9ca4af 45%, #5a616b 100%);
}

/* Erklärung neben der Plakette */
.m3-tech span {
  color: var(--dark-copy, #4b647f);
}

/* Linienfarbe der Liste (gleich wie die Download-Liste) */
.m3-panel {
  --pdf-line: #e3ebf4;
}

html[data-theme="dark"] .m3-panel {
  --pdf-line: rgba(255, 255, 255, 0.09);
}

/* ==========================================================================
   Tablet / Handy
   Tablet: Vorteile in zwei Spalten, Technik und Downloads untereinander
   ========================================================================== */
@media (max-width: 899px) {
  .m3-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .m3-split {
    grid-template-columns: 1fr;
  }
}

/* Handy: Kopf kompakter, Vorteile einspaltig, Kennzahlen untereinander */
@media (max-width: 600px) {
  .page-hero.m3-hero {
    padding: 1.5rem 1.3rem;
  }

  .m3-mark {
    --mark: 58px;
  }

  .m3-benefits {
    grid-template-columns: 1fr;
  }

  .m3-facts {
    display: grid;
  }

  .m3-facts li {
    padding: 0;
    border-left: 0;
  }
}

/* Hinweis unter den Downloads */
.m3-note {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--dark-copy, #5b7088);
}

/* Tablet: Vorteile in zwei Spalten */
@media (min-width: 601px) and (max-width: 1100px) {
  .m3-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}