/* ============================================================
   MAC FÜR LOKALE KI — nur Seitenspezifisches
   ============================================================
   Die Seite lebt von den gemeinsamen .v4-page-Komponenten aus
   style-v4.css. Hier stehen nur: das Hero-Raster mit der
   Speicher-Grafik, die Speicherklassen-Tabelle (Vorbild:
   Plattform-Tabelle in onlineshop-v4.css), die Rechner-Chips,
   die Quellenliste und Kontextabstaende.
   ============================================================ */

/* ---- Hero: Text links, Speicher-Grafik rechts
        (Rasteridee wie beim Wissen-Hub) ---- */
.v4-mac .v4-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--v4-space-6);
  align-items: center;
}
.v4-mac .v4-hero-text {
  color: var(--v4-text-secondary);
  max-width: 62ch;
}
.v4-mac .v4-hero-grafik svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-left: auto;
}
@media (max-width: 900px) {
  .v4-mac .v4-hero-raster { grid-template-columns: 1fr; }
  .v4-mac .v4-hero-grafik svg { margin-left: 0; }
}

/* ---- Speicherklassen-Tabelle: Engineering-Dokumentation,
        kein Datengrab. Die Speichergroessen in der ersten Spalte
        stehen in Mono, die Einordnung darunter bleibt klein. ---- */
.v4-mac .v4-mac-tabelle { overflow-x: auto; }
.v4-mac .v4-mac-tabelle table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: var(--v4-bg-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-card);
}
.v4-mac .v4-mac-tabelle th {
  font-family: var(--v4-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--v4-text-secondary);
  padding: var(--v4-space-2) var(--v4-space-3);
  border-bottom: 2px solid var(--v4-border);
}
.v4-mac .v4-mac-tabelle td {
  padding: var(--v4-space-2) var(--v4-space-3);
  border-bottom: 1px solid var(--v4-border);
  font-size: 15px;
  color: var(--v4-text-primary);
  vertical-align: top;
}
.v4-mac .v4-mac-tabelle tr:last-child td { border-bottom: none; }
.v4-mac .v4-mac-tabelle td:first-child {
  font-size: 13.5px;
  color: var(--v4-text-secondary);
  white-space: nowrap;
}
.v4-mac .v4-mac-tabelle td:first-child strong {
  display: block;
  font-family: var(--v4-font-mono);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--v4-text-heading);
}

/* ---- Rechner-Chips: Absprung in den Umkehr-Modus des
        Hardware-Rechners, als ruhige Mono-Steuerelemente ---- */
.v4-mac .v4-mac-preise { margin-top: var(--v4-space-4); }
.v4-mac .v4-mac-preise p:last-child { margin-bottom: 0; }
.v4-mac .v4-mac-rechner { margin-top: var(--v4-space-4); }
.v4-mac .v4-mac-rechner-titel {
  font-weight: 600;
  color: var(--v4-text-heading);
  margin: 0 0 var(--v4-space-2);
}
.v4-mac .v4-mac-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v4-space-2);
  margin-bottom: var(--v4-space-2);
}
.v4-mac .v4-mac-chip {
  font-family: var(--v4-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--v4-blue);
  text-decoration: none;
  background: var(--v4-bg-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-control);
  padding: 8px 14px;
  transition: border-color var(--v4-transition);
}
.v4-mac .v4-mac-chip:hover { border-color: var(--v4-blue); }

/* ---- Quellen: Linienliste unter dem FAQ ---- */
.v4-mac .v4-mac-quellen { margin-top: var(--v4-space-6); }
.v4-mac .v4-mac-quellen h3 { margin-bottom: var(--v4-space-1); }
.v4-mac .v4-mac-quellen li {
  font-size: 15px;
  color: var(--v4-text-secondary);
}

/* ---- Textlinks im Fliesstext (Karten, FAQ, Quellen) ---- */
.v4-mac .v4-karte a,
.v4-mac .v4-faq a,
.v4-mac .v4-mac-quellen a {
  color: var(--v4-blue);
  font-weight: 600;
  text-decoration: none;
}
.v4-mac .v4-karte a:hover,
.v4-mac .v4-faq a:hover,
.v4-mac .v4-mac-quellen a:hover { text-decoration: underline; }

/* ---- Kontextabstaende ---- */
.v4-mac .v4-hinweis { margin-bottom: var(--v4-space-3); }