/* ============================================================
   AUTOMATISIERUNGSBEISPIELE KMU — nur Seitenspezifisches
   ============================================================
   Die Seite lebt von den gemeinsamen .v4-page-Komponenten aus
   style-v4.css. Hier stehen Kontextabstaende sowie die zwei
   Bausteine, die nur diese Seite braucht: die Fallstudien-Box
   und der Vorher/Nachher-Vergleich (Amber = manueller Zustand,
   Blau = automatisierter Zustand, analog Reibungs-/Loesungsfarbe
   des Design-Systems).
   ============================================================ */

/* Nummerierte Beispiel-Listen folgen direkt auf die H2 */
.v4-beispiele .v4-liste-nummeriert { margin-top: var(--v4-space-2); }

/* Schlichte Listen (Rechnungen, Reibungspunkte): Titel + Text
   wie in der nummerierten Variante, plus Abschlusslinie */
.v4-beispiele .v4-liste h3 { font-size: 17px; margin-bottom: 2px; }
.v4-beispiele .v4-liste p {
  margin: 0;
  color: var(--v4-text-secondary);
  font-size: 15px;
}
.v4-beispiele .v4-liste li:last-child {
  border-bottom: 1px solid var(--v4-border);
}
.v4-beispiele .v4-liste-reibung li { padding-block: var(--v4-space-2); }

/* Faustformel: eigener Block unter den zwei Beispielrechnungen */
.v4-beispiele .v4-faustformel { margin-top: var(--v4-space-4); }
.v4-beispiele .v4-faustformel .v4-kernsatz { max-width: 68ch; }

/* Fallstudien-Box: ruhige Karte ohne Hover (kein Link) */
.v4-beispiele .v4-fallstudie {
  background: var(--v4-bg-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-card);
  padding: var(--v4-space-4);
  max-width: 900px;
  margin-top: var(--v4-space-3);
}
.v4-beispiele .v4-fallstudie p {
  color: var(--v4-text-secondary);
  font-size: 15.5px;
}
.v4-beispiele .v4-fallstudie .v4-hinweis { margin: var(--v4-space-2) 0 0; }

/* Vorher/Nachher: zwei Boxen nebeneinander, unter 600px gestapelt */
.v4-beispiele .v4-vn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v4-space-2);
  margin-top: var(--v4-space-1);
}
.v4-beispiele .v4-vn-box {
  border: 1px solid var(--v4-border);
  padding: var(--v4-space-2);
}
.v4-beispiele .v4-vn-box p { margin: 0; font-size: 15px; }
.v4-beispiele .v4-vn-label {
  font-family: var(--v4-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.v4-beispiele .v4-vn-vorher { border-left: 3px solid var(--v4-signal); }
.v4-beispiele .v4-vn-vorher .v4-vn-label { color: var(--v4-signal); }
.v4-beispiele .v4-vn-nachher { border-left: 3px solid var(--v4-action-primary); }
.v4-beispiele .v4-vn-nachher .v4-vn-label { color: var(--v4-blue); }
@media (max-width: 600px) {
  .v4-beispiele .v4-vn { grid-template-columns: 1fr; }
}

/* Werkzeug-Hinweis («Wichtig») mit Abstand zur Liste darueber */
.v4-beispiele .v4-werkzeug-hinweis { margin-top: var(--v4-space-3); }

/* Gruppen innerhalb der Anwendungsbereichs-Sektion (Abnahme-Befund
   30.08.2026: drei kopflastige Mini-Sektionen wurden eine Sektion
   mit drei Gruppen) */
.v4-beispiele .v4-bsp-gruppe { margin-top: var(--v4-space-6); }