/* ============================================================
   3D Cargo-Container Kartenstil für Prozesslandschaft
   Einbinden NACH dem bestehenden <style>-Block bzw. nach Bootstrap,
   damit die Regeln hier Vorrang haben:
   <link rel="stylesheet" href="cargo-container.css">
   ============================================================ */

/* Container gestapelt, aber mit genug Abstand, damit sie sich beim
   Hover-Lift (translateY/scale) nicht mit den Nachbarn berühren */
#prozess-container .row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
  margin-bottom: 1.75rem !important;
}

#prozess-container .col {
  perspective: 1400px;
}

.process-card {
  --c-color: #7c848b; /* Fallback: verwittertes Stahlgrau */
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 0;
  /* Linker Farbbalken wird hier ausgeblendet (Breite 0). Die Farbe selbst
     kommt weiterhin per !important aus dem inline style (Gruppenfarbe) -
     kommentiert man dieses Stylesheet aus, greift wieder der 5px-Balken
     aus dem <style>-Block der Seite. */
  border-left-width: 0 !important;
  background-color: var(--c-color);
  background-image:
    /* vier Nietenpaare in den Ecken */
    radial-gradient(circle at 14px 14px, #dfe4e8 0 3px, rgba(0,0,0,.35) 3px 4px, transparent 4px),
    radial-gradient(circle at calc(100% - 14px) 14px, #dfe4e8 0 3px, rgba(0,0,0,.35) 3px 4px, transparent 4px),
    radial-gradient(circle at 14px calc(100% - 14px), #dfe4e8 0 3px, rgba(0,0,0,.35) 3px 4px, transparent 4px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #dfe4e8 0 3px, rgba(0,0,0,.35) 3px 4px, transparent 4px),
    /* gewelltes Blech, vertikale Riffelung, eingefärbt in der Reedereifarbe */
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--c-color) 90%, white) 0px, color-mix(in srgb, var(--c-color) 90%, white) 2px,
      color-mix(in srgb, var(--c-color) 78%, black) 2px, color-mix(in srgb, var(--c-color) 78%, black) 4px,
      color-mix(in srgb, var(--c-color) 100%, white) 4px, color-mix(in srgb, var(--c-color) 100%, white) 6px,
      var(--c-color) 6px, var(--c-color) 10px
    );
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Typische Reedereifarben je Prozessgruppe (per Attribut-Selektor auf den
   bestehenden inline border-left-color-Wert gemappt, keine JS-Änderung nötig) */
.process-card[style*="#6f42c1"] { --c-color: #c6007e; }  /* Führung -> Magenta wie "ONE" */
.process-card[style*="#0d6efd"] { --c-color: #0091da; }  /* Kern -> Maersk-Blau */
.process-card[style*="#fd7e14"] { --c-color: #e4610f; }  /* Unterstützung -> Reederei-Orange */

/* Hover: Container wird wie vom Kran aus dem Stapel gehoben */
.process-card:hover {
  z-index: 10;
  transform: translateY(-16px) translateZ(50px) scale(1.04);
  box-shadow:
    0 30px 40px rgba(0,0,0,.4),
    0 10px 12px rgba(0,0,0,.3);
}

/* Karte braucht eine Mindesthöhe, weil das Placard jetzt absolut
   positioniert wird und keinen Platz mehr im Fluss beansprucht */
.process-card {
  min-height: 170px;
}

/* Innenraum-Placard über dem Blech - Ecken liegen exakt auf den Nieten
   (14px Abstand = Nietenposition), ringsum bleibt ein Blech-Rand sichtbar */
.process-card .card-body {
  position: absolute !important;
  inset: 14px;
  z-index: 2;
  background: rgba(20,24,28,.55);
  margin: 0;
  border-radius: 2px;
  backdrop-filter: blur(1px);
}

.process-card .card-title {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.process-card small.text-muted {
  color: rgba(255,255,255,.75) !important;
}

.process-card .border-top {
  border-top-color: rgba(255,255,255,.25) !important;
}

/* "Papierlos" aktiv: grüner Zertifizierungs-Glow statt grüner Füllfarbe */
.process-card.digital-active {
  box-shadow:
    inset 0 0 0 3px #20c997,
    0 0 16px rgba(32,201,151,.6);
}

.process-card .digital-badge {
  position: relative;
  z-index: 3;
}